ت تحميل هذا الكتاب من موقع كتب الجحاسب العربية"™Cb4a.cO www.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


المقدمه : 


الدرس الأول : الأساسيات : تعريف ملف |۲1 والوسوم الرئيسية فيه»ء إنشاء صفحة ويب بسيطة 


الدرس الثاني : الألوان : تنسيق الصفحة» أضف لصفحتك بعض الحيوية باستخدام الألوان والخلفيات 
الدرس الثالث : الخطوط : التحكم بالخطوط في الصفحة»ء إختيار أنواعها وأحجامها وتنسيقاتها 

الدرس الرابع : الفقرات والقوائم : قم بتنسيق وتنظيم صفحتك» واستخدم القوائم لترتيب بياناتك 

الدرس الخامس :_الصور والرسومات : إدراجهاء التحكم بأحجامها وأبعادها. أنواع ملفات الصور في الويب 
الدرس السادس : الروابط والوصلات التشعبية : كيف وصلت إلى هنا؟؟؟ بالنقر على وصلة تشعبية! 
الدرس السابع : الجداول (1) : رتب بياناتك ضمن الجداول» وتحكم بشكل صفحتك بصورة فعالة 


* أمثلة تطبيقية على الجداول 


الدرس التاسع : الإطارات (1) : قسم صفحتك إلى إطارات أفقية أو عمودية أو الإثنين معا ... لا فرق! 
الدرس العاشر : الإطارات (2) : لا يكفي أن تدر ج إطارآً في صفحتك» بل حدد خصائصه أيضا 
الدرس الحادي عشر : الإطارات (3) : أدرجت إطارآ؟ فهل تأكدت من أنه يعمل بالشكل المطلوب...؟ 
الدرس الثاني عشر : وسوم ... من هنا وهناك : بلا تعليق ... فالعنوان يكفي 
الدرس الثالث عشر : الخرائط الصورية : صورة واحدة فقط ... وعدة وصلات تشعبية 
الدرس الرابع عشر : النماذج (1) : تود أن تستطلع آراء زوارك!؟ ... عليك بالنماذج 
الدرس الخامس عشر :_النماذج (2) : تعذدت الأشكال ... والنموذج واحذ 

الدرس السادس عشر : المتصفحات والوسوم الخاصة : الأرق الدائم لمصممي صفحات الويب 
الدرس السابع عشر : الويب واللغة العربية : الويب ... بتتكلم عربي 


ت تحميل هذا الكتاب من موقع كتب الجاسب العربيةCb4a.cO™N www.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


المقدمه 


إنها اللغة المستخدمة لإنشاء صفحات الإنترنت. )و .(Hyper T 3 Markup Language رlصتخإ nl‏ 
وهي ليست لغة برمجة بالمعنى والشكل المتعارف عليه للغات البرمجة الأخرى كلغة € . فهي مثلاً لا تحتوي على 
جمل التحكم والدوران»ء وعند الحاجة لاستخدام هذه الجمل يجب تضمين شيفرات من لغات أخرى ك ,۷2هل 
JavaScript, 1‏ . كذلك فهي لا تحتاج إلى مترجم خاص به ۲٥1أمإه٥‏ . وهي غير مرتبطة بنظام تشغيل 
معين» لأنه يتم تفسيرها وتنفيذ تعليماتها مباشرة من قبل متصفح الإنترنت وبغض النظر عن النظام المستخدم. لذلك 
فهي لغة بسيطة جداء وسهلة الفهم والتعلم ولا تحتاج لمعرفة مسبقة بلغات البرمجة والهيكلية المستخدمة فيها. بل 
ربما كل ما تحتاجه هو القليل من التفكير المنطقي وترتيب الأفكار. 


تتكون مفردات لغة ام۳8 من شيفرات تسمى 16S‏ أي الوسوم. وهي تستخدم بشكل أزواج وتكتب بالصيغة 
التالية (من اليسار إلى اليمين) :- 


2 TAG> اص اموب ین الو هن والدي سپتاٹر نها‎ A TAG 


وسم النهاية 
1 السكدابة 
بحم بو جود اشارة | اراس الال 


فعلى سبيل المثال الوسم <8> يستخدم لكتابة الكلمات بخط أسود عريض 8014 وذلك بالشكل التالي: 
</B> Text <B>‏ 


وهناك بعض الوسوم الخاصة التي تستخدم بصورة مفردة مثل وسم نهاية السطر <8۸> أو قد تستخدم بكلتا 
الحالتين متثل وسم الفقرة .<P>‏ 
وسوف نناقش هذه الوسوم وغيرها بالتفصيل في حينه إن شاء الله 


کیف نبدا... 

لا يتطلب كتابة ملف 1۷1[ أية برامج خاصة فهي كما قلنا لغة لا تحتوي على برنامج مترجم. بل نحتاج فقط 
إلى برتامج اتحرير التصوضن ابديطة ومتالجهاء وير تامج المفكرة ة الموجود في sس0لمW1‏ يفي بهذا الغرض. 
وكذلك إلى أحد متصفحات الؤنترنت MS ]nternet Explorer yİ Netscape Navigator‏ لمعاينة الصفحات 
التي نقوم بتصميمها. وعليك فقط أن نقوم بحفظ النص المكتوب بملف يحمل الاسم الممتد 1اصهاط. أو صغط. 
والجدير ذكره أنه يوجد العديد من البرامج التي تستخدم لإنشاء صفحات 1)1[. دون الحاجة لمعرفة هذه اللغة 
حيث يقوم المستخدم من خلالها بكتابة الصفحات وتصميمها بما تحويه من نصوص ورسومات وجداول ثم يقوم 
البرنامج بتخليق الوسوم المناسبة وتحويل هذه الصفحات من وراء الكواليس تلقائيا وحفظها بتتسيق 1«)ط. أي أن 
دور المستخدم ينحصر في الكتابة والتصميم فقطء دون معرفته للشيفرة التي استخدمت. وبالتالي عدم قدرته على 
التحكم بأي وسم أو تعديل الشيفرة حسب الحاجةء إلا من خلال إعادته للتصميم الأساسي ثم إعادة التحويل و الحفظ 
من قبل البرنامج. وهذه الطريقة على سهولتها وسرعتها نسبياء إلا أني لا أنصح باستخدامها لمن يريد معرفة هذه 
اللغة والتمكن منها. 


قبل أن نبدأ : حسناء لديك محرر نصوص ممتاز لكتابة ملفات ا1۷[ ولديك متصفح إنترنت لمعاينتهاء ولديك 
هذه الدروس التي ستتطلق معها إلى عالم تصميم صفحات الويب. هل هذا يكفي؟ برأيي المتواضع» لا 


تم تحميل هذا الكتاب من موقع كتب الجاسب العربية"c0 www. C642.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 

تحتاج دائما وأبدا إلى تطبيق ما تتعلمه بصورة عملية أكثر من مجرد الأمثلة المدرجة في الدروس. ما رأيك في أن 
تفكر بموضوع ما يستهويك وتحب أن تتعاطى به؟ وتخيل أنك ستقوم بإنشاء موقع ويب عنه بصورة واقعية. ومع 
تقدمك في الدروس قم بتطبيق ما فيها على صفحاتك. ستجد الكثير من المتعة في هذاء وستسر جداً عندما ترى 
صفحنك تتبلور أمام عينيك يوما بعد يوم» والأهم من هذا كله هو أنك ستكتشف أي ثغرات في استيعابك لهذه 
الدروس (وعندها من المؤكد أنك ستقوم بتلافيها) وقد تكتشف كذلك تغرات ارتكبها كاتب هذه الدروس. 


والآن... لنبداً 


ت تحميل هذا الكتاب من موقع كتب الجاسب العربيةCb4a.cCO™^N www.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


الدرس الأول 
الأساسيات 


أهلاً وسهلا بك إلى الدرس الأول من دروس ا۷1 11. سوف أقوم في هذا الدرس بسرد الوسوم الأساسية لصفحة 


ناخد الوسرم القاة: 


وسم البداية | وسم النهاية 
</HTML> <HTML>‏ 
</HEAD> <HEAD>‏ 
</TITLE> <TITLE>‏ 
</BODY> <BODY>‏ 


ماذا تلاحظ؟ أن كل منها يتألف من زوج من الوسوم أحدهما وسم البدايةء والآخر وسم النهاية. ويتميز وسم النهاية 
بوجود الرمز / . تأمل الرسم التالي» فهو يعطي فكرة عن ترکیب ملف 1غ٩‏ 


xhtml * 

ا «head?‏ 
تمنو ان الصشحة و مات خاصة نیا لہے 1ے 
خالمويات و الوصف واسم الكائب و ئة ٣1٤1<‏ ]> 
fhead?‏ < 
thody?‏ 


محتويات اتصفحة با فيها من نصوص 
وجداول ووصلات نشعية ورسوم وصور 


body? 
< fhtml?r 


إذن فملف 11 يبدا دائما بالوسم <111 > وينتهي بالوسم <11/>. لا تنسى ذلك! 


أما الوسم <2 184> فيحدد بداية المقطع الذي يحتوي على المعلومات الخاصة بتعريف الصفحة. كالعنوان الظاهر 
على شريط عنوان المتصفح. وهذا العنوان بدوره يحتاج لأن يوضع بين lلوسnين: </TITLE> ... <11TLE>‏ 
وبالطبع يجب كتابة الوسم <2 >/1٤4‏ لكي ننهي هذا المقطع. 


ت تحميل هذا الكتاب من موقع كتب الجحاسب العربية"™Cb4a.cO wwWW.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


نأتي إلى الوسم <۷ 80> والذي يتم كتابة نصوص صفحة الويب ضمنه»ء بالإضافة إلى إدراج الصور والجداول 
وباقي محتويات الصفحة. وهو أيضا يحتاج إلى وسم الإنهاء <۷ 805/> 


ما رأيك لو نبدأ بتطبيق هذه المعلومات بصورة عمليه؟ هيا... قم بفتح برنامج المفكرة واكتب ما يلي: 


<HTML> 
<HEAD> 
<TITLE> 
This is a test Webpage 
<ITITLE> 
</HEAD> 


<BODY> 
Wow, I'm writing my first webpage 
</BODY> 
</HTML> 


والآن قم بحفظ ما كتبته في ملف وبأي اسم تختاره. ولا تنسی أن الامتداد المستخدم في أسماء ملفات ga HTML‏ 
"ط. أو .٤"1‏ مثلا أنا اخترت الاسم ١۳ط.٥1ا؟_1ء1‏ ومن الأفضل أن تقوم بإنشاء مجلد مستقل على القرص الصلب 
لكي تحفظ به ملفاتك فهذا يسهل عليك عملية استرجاعها للعرض أو التحديث. 


حان وقت العرض» لكي نشاهد نتيجة ما كتبناه. قم بتشغيل متصفح الإنترنت الذي تستخدمه. فإذا كان Netscape‏ 
Navigator‏ اختر الأمر 1ءم0 ...۴11e‏ من قائمة .۴11e‏ أما في lorerاExp MS ]nternet‏ فاختر الأمر e1م0p...‏ 
من قائمة .۴11٥‏ ثم حدد المسار الذي يوجد به الملف. 


وذلك طبعا حسب الافتراضات السابقة التي اتبعتها عند تخزين الملف. وهذا ما حصلت عليه: 


Ej C:îhtmfiles1 st_file.htm [local] - Microsoft Corporation Arabic Intern... EE E 


Fils Edt Wie lao Favorites Help 


LES <S BA COD SS MN 


| Address | LC: htmfiles"™l st_fila.htrn >| 


Wow, Tm writhg my first webpage 


فل حك عل قن الج لن سروك © ل فت ا رل هة رو اض ةك 
وقبل أن نستمر أريد أن أنبهك إلى بعض الملاحظات عند كتابة صفحات الويب: 


ه٠‏ لا يوجد فرق بين كتابة الوسوم بالأحرف الإنجليزية الكبیر ة 0۴۴٤۸٣۳۸8۴‏ أو الأحرف الصغيرة 
er6س].‏ لذلك تستطيع الكتابة بأي شكل منهما أو حتى الكتابة بكليهما. 


ت تحميل هذا الكتاب من موقع كتب الجحاسب العربيةCb4a.coNn www.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


ه٠‏ إن المتصفحات لا تأخذ بعين الاعتبار الفراغات الزائدة أو إشارات نهاية الفقرات (أي عندما تقوم بضغط مفتاح 
ع ) التي تجدها هذه المتصفحات في ملف 1).1[. وبعبارة أخرى فإن باستطاعتك كتابة ملفك السابق 
بالشكل التالي: 


<HTML><HEAD><TITLE> This is a test Webpage </TITLE></HEAD><BODY> 
Wow, I'm writing my first webpage </BODY></HTML> 


أو بالشكل التالي: 


<HTML> 
<HEAD> 
<TITLE> 
This 

isa 

test 
Webpage 
<ITITLE> 
</HEAD> 
<BODY> 
Wow, 

I'm 
writing 
my 

first 
webpage 
</BODY> 
</HTML> 


<HTML> <HEAD> <TITLE> 

This is a test Webpage 

<ITITLE> 

</HEAD> 

<BODY> 

Wow, I'm writing my first webpage 
</BODY> 

</HTML> 


رق كل الحالات شتحصل على قفتن التق جة: 

لكن هذا لا يعني أن الفقرة المكونة مثلا من عشرة أسطر ستمتد إلى عدة أمتار بعرض الشاشة. كلا بالطبع لأن المتصفح 
سيقوم بعمل التفاف تلقائي لها بحسب عرض الشاشة»ء مهما كان مقدار هذا العرض. 

والآن قد تتساءل» إذن كيف يمكن التحكم بمقدار النص المكتوب في كل سطر وكيف يمكن تحديد نهاية الفقرة وبداية 
الفقرة التي تليها؟ سؤال وجيه!!! والإجابة عليه هي: 


نستخدم الوسم <8> لتحديد النهاية للسطر. والبدء بسطر جديد (لاحظ أن هذا الوسم مفردء أي ليس له وسم 
نهاية). 


ونعود إلى المثال السابقء قم بتعديل الملف لكي يصبح بالشكل التالي 


<HTML> 
<HEAD> 
<TITLE> 
This is a test Webpage 
</TITLE> 


تم تحميل هذا الكتاب من موقع كتب الحاسب العربية www. Cb4a. C0"‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


</HEAD> 
<BODY> 


Wow, <BR> I'm writing my <BR> 
first webpage 

</BODY> 

</HTML> 


م ا : ا 
E C“htmfilest1st_file_htm [local] - Microsoft Corporation Arabic Intern... EE E‏ | 


C:htmfiles1 sk_file.htrn 


وهناك أيضا الوسم <۴> الذي يقوم تقريبا بنفس عمل الوسم السابق أي أنه ينهي السطر أو الفقرة ويبداً بسطر جديد لكن 
مع إضافة سطر إضافي فارغ بين الفقرات. 


<HTML> 

<HEAD> 

<TITLE> 

This is a test Webpage 
<ITITLE> 

</HEAD> 

<BODY> 

Wow, <P> I'm writing my <P> 
first webpage 
</BODY> 

</HTML> 


(Ki C-\htmfiles\1st_file.htm (local) - Microsoft Corporation Arabic Inte... Ile] E 


ت تحميل هذا الكتاب من موقع كتب الحجاسب العربية"™Cb4a.cO wwWW.‏ 
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أما الفراغات فتعتبر رموزآ خاصة لذلك لا نستطيع التحكم بها وبعددها إلا باستخدام الوسم &;مءط1 (والأحرف هي 
اختصار للعبارة .)N0n Bاءa)aط1ء Space‏ وإذا أردت إدخال عدة فراغات بين نص وآخر ما عليك إلا كتابة هذا 
الوسم بنفس عدد الفراغات المطلوب. كما يجب عليك التقيد بالأحرف الصغيرة هنا. 


ا کک لے لر ركف ا اکل ا : 
إذن لنعد إ و لي 


<HTML> 

<HEAD> 

<TITLE> 

This is a test Webpage 

</ITITLE> 

</HEAD> 

<BODY> 

Wow, &nbsp; &nbsp; &nbsp; 

I'm &nbsp; &nbsp; &nbsp;writing &nbsp; &nbsp; 
&nbsp; my &nbsp; &nbsp; &nbsp; first &nbsp; &nbsp; &nbsp; webpage 
</BODY> 

</HTML> 
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Wow, Im writin my ftst webpage 


وبمناسبة الحديث عن الرموز الخاصة فهناك العديد من هذه الرموز والتي يجب أن تكتب بصورة معينة وباستخدام 
الوسوم وليس مباشرة بصورتها العادية. خذ متلا إشارتي أكبر من وأصغر من واشارة الاقتباس ”. كل هذه الإشارات 
تستخدم أصلا مع الوسوم فهي محجوزه ضمن مفردات لغة 11١1‏ ومن الخطأ استخدامها بصورتها الصريحة لئلا 
فن دك إلى حدر ك مشاكل فى طربةة عرض السقحة: كذلك فق هناك رموز | غر موجردة اسسا عل رة 
المفاتيح كرمز حقوق الطبع © ورمز العلامة المسجلة © ونحتاج إلى هذه الطريقة(طريقة الوسوم) لكتابتها. وإليك 
جدول ببعض هذه الرموز ووسومها المكافئة. وألفت نظرك إلى أنها تكتب كما هي في الجدول وبدون إشارتي <> 


الكود الرمر 
الرموز 

: &lIsquo; 

: &rsquo; 

, &sbquo; 

&ldquo;‏ ن 

4 &rdquo; 


تم تحميل هذا 
للمزيد من 


الكتاب من موقع كتب الجاسب العربيةCb4a.cCO™^N www.‏ 
الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


&bdquo; 
&dagger; 
&Dagger; 
&permil; 
&lsaquo; 
&rsaquo; 
&spades; 
&clubs; 
&hearts; 
&diams; 
&oline; 
&larr; 
&uarr; 
&rarr; 
&darr; 
&trade; 
&amp; 
&lt; 
&gt; 
&quot; 
&times; 
&divide; 
&ndash; 
&mdash; 
&nbsp; 
&iexcl; 
&cent; 
&pound; 
&curren; 
&yen; 
&euro; 
&brvbar; 
&sect; 
&#127; 
&uml; 
&copy; 
&ordf; 
&laquo; 
&not; 
&reg; 
&macr; 
&deg; 
&plusmn; 
&sup2; 
&sup3; 
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ت تحميل هذا الكتاب من موقع كتب الجاسب العربية"¬™Cb4a.cO www.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


الحروف إإج"S‏ 


&acute; 
&micro; 
&para; 
&middot; 
&cedil; 
&sup1; 
&ordm; 
&raquo; 
&frac14; 
&frac12; 
&frac34; 
&iquest; 


&Agrave; 
&Aacute; 
&Acirc; 
&Atilde; 
&Auml; 
&Aring; 
&AElig; 
&Ccedil; 
&Egrave; 
&Eacute; 
&Ecirc; 
&Euml; 
&lgrave; 
&lacute; 
&lcirc; 
&luml; 
&ET; 
&Ntilde; 
&Ograve; 
&Oacute; 
&Ocirc; 
&Otilde; 
&Ouml; 
&Oslash; 
&Ugrave; 
&Uacute; 
&Ucirc; 
&Uuml; 
&Yacute; 
&THORN; 


&szlig; 
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تم تحميل هذا 
للمزيد من 


الكتاب من موقع كتب الجحاسب العربية wwWW. Cb4a. cO"‏ 
الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


&agrave; 
&aacute; 
&acirc; 
&atilde; 
&auml; 
&aring; 
&aelig; 
&ccedil; 
&egrave; 
&eacute; 
&ecirc; 
&euml; 
&igrave; 
&iacute; 
&icirc; 
&iuml; 
&et; 
&ntilde; 
&ograve; 
&oacute; 
&ocirc; 
&otilde; 
&ouml; 
&oslas; 
&ugrave; 
&uacute; 
&ucirc; 
&uuml; 
&yacute; 
&torn; 
&yuml; 
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ت تحميل هذا الكتاب من موقع كتب الجاسب العربية"™Cb4a.cO www.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


الدرس الثاني 
الألوان - أضف لصفحتك بعض الحيوية 


يمكن إضافتها إلى الوسم <۷ 80> من أجل التحكم بالشكل العام للصفحةء» وخصوصا فيما يتعلق بالألوان. 


طبعاً أنت لا زلت تذكر الصفحة التي قمنا بكتابتها في الدرس الأول. صفحة بسيطة بخلفية رمادية وخط صغير نسبياً 
لونه أسود. وهذه هي الإعدادات الإفتراضية التي يعتمدها المتصفح عندما لا نقوم نحن بتحديد إعدادات أخرى. (ربما 
تقول : هذه صفحة إنترنت! أين الألوان والرسومات والخطوط الجميلة والتنسيقات التي نراها في صفحات الإنترنت؟ 
معك حق لكن مهلا فما زلنا في البداية). 

سوف نستمر باستخدام صفحتتا هذه لتوضیح أمثلة هذا الدرس أيضاء لكن لن أقوم بتكرار كتابة وسوم البداية طالما أن 
عملنا يتركز في الجز ء المخصص لمحتويات الصفحة نفسها أي ضمن الوسمين <5۷ 80> ... <5۷ .<>/B0‏ 

إذن لنبدأً العمل! 


نطلق كلمة خاصية (ءا ط٣٤‏ 4) على التعابير التي تضاف إلى الوسوم» من أجل تحديد الكيفية أو الشكل الذي تعمل بها 
هذه الوسوم. وبعبارة أخرى فإن الوسم يقوم بإخبار المتصفح عن العمل الذي يجب القيام به أما الخاصية فتحدد الكيفية 
التي سيتم بها أداء هذا العمل. 


تأمل الشيفرة التالية: 


<BODY BGCOLOR="FFFFFF"> 


</BODY> 


لقد قمت بإضافة الخاصية 86٣001 0R‏ إلى الوسم <۷ (80> » وهي نقوم بتحديد لون الخلفية للصفحة. أما 


۴۴۴۴۴ فهي القيمة التي تمثل اللون المختار وهو هنا اللون الأبيض» (لاحظ أنها مكتوبه بين إشارتي ' ') ولو أردت 
تمثيل اللون الأسود لكتبت الرمز 000000. أو الرمز CC6699‏ للون الأزرق الفاتح eo‏ 
فن أن حا هذه القيم» وكيف؟. .. تابع القراءة وسوف تعرف 


القليل عن الألوان... 


تلاحظ أن القيم السابقة مكونة من ستة رموز» وهي مكتوبة بالصيغة التالية:- 


ت تحميل هذا الكتاب من موقع كتب الحاسب العربية"™Cb4a.cO wwWW.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


FF FF FF 
00 00 00 
66 99 CC 


RR GG BB 


ر 
رشرات عدلان u‏ رشرات عدلان 
اللوت الأزرق الوت الأحصر اللون الجر 


هناك تلاثة ألوان أساسية هي الأحمر والأخضر والأزرق» ولكل منها يوجد 256 درجة لونية ويعبر عن هذه الدرجات 
بالأرقام من 000 وحتى 255. ومن خلال مزج هذه الألوان بدرجاتها اللونية المختلفة نحصل على الألوان الأخرى. 


* إن أي لون هو مزيج -وبنسبة معينة من الدرجات- من هذه الألوان الثلاثة * 


فمثلا اللون الأسود مكون من الدرجة 000 من كل من اللون الأحمر والأخضر والأزرق. واللون الأبيض مكون من 
الدرجة 255 من هذه الألوان. أما اللون الأصفر فهو مكون من الدرجة 255 للون الأحمر» والدرجة 255 للون 
الأخضر» والدرجة 000 من اللون الأزرق... وهكذا بنفس الطريقة يتم تكوين باقي الألوان. 


وبعملية حسابية بسيطة 256<256<256 ينتج لدينا أن عدد الألوان التي يمكن الحصول عليها بمز ج الألوان الثلاثة 
السابقة هو 16777216 بالضبط. 


حسناء لکن من أي جاءت الرموز ۴۴۴۴۴۴ والتي عبرت عن اللون الأبيض بها. إنها ببساطة أرقام... مكتوبة بالنظام 
السداس عشري (نظام عددي أساسه الرقم 16 ويعبر عنه باستخدام الأرقام العادية من 0 إلى 9 والرموز 

۸B, ,,E,۴‏ ). فالرقم 255 بالنظام العشري العادي یکافئه الرقم ۴۴ بالنظام السداس عشري. 

إذن فالرقم السداس عشري ۴۴ على اليسار يمتل الدرجة 255 للون الأحمر. والرقم ۴۴ في الوسط يمتل الدرجة 255 
من اللون الأخضر. والرقم ۴۴ على اليمين يمتل الدرجة 255 من اللون الأزرق. 

وعلى هذا المنوال يعبر عن اللون الأزرق الفاتح بالرقم السداس عشري: K06699‏ أما اللون الأسود فرقمه هو 
000000. 


وهذا جدول ببعض الألوان ورموزها المكافئة بالنظام السداس عشري. 


Antiquewhite Aliceblue 
#FAEBD7 #FOF8FF 
Beige Azure 
#FSFSDC #FOFFFF 


Blanchedalmond Ee Bisque 
#FFEBCD #000000 #FFE4C4 


Cornsilk 
#FFF8DC 


ت تحميل هذا الكتاب من موقع كتب الجحاسب العربية wwWW. Cb4a. cO"‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


Darkblue 
#00008B 
Darkgreen Darkgray 
#006400 #A9A9A9 
Darkmagenta 
#8B008B 
Darkred 
#8B0000 
Darkslategray Darkslateblue 
#2F4F4F #483D8B 
Floralwhite 
#FFFAFO 
Ghostwhite Gainsboro 
#F8F8FF #DCDCDC 
Honeydew Green 
#008000 


#FOFFFO 


Indigo 
#4B0082 


Lavender Khal Ivory 
#E6E6FA 8C #FFFFFO 
Lemonchiffon Lavenderblush 
#FFFACD #FFFOFS 

Lightblue 


Lightcyan 
#EOFFFF #ADDS8E6 
Lightgrey Lightgoldenrodyellow 
#D3D3D3 #FAF AD2 
Lightpink 
#FFB6C1 
Lightsteelblue 
#BO0C4DE 
Lightyellow 
#FFFFEO 
Eee Linen 
#800000 #FAFOE6 
Mediumblue 
#0000CD 
Mistyrose Mintcream Midnightblue 
#FFE4E1 #FSFFFA #191970 
Navy Navajowhite Moccasin 
#000080 #FFDEAD #FFE4B5 
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ت تحميل هذا الكتاب من موقع كتب الحاسب العربية wwWW. Cb4a. cO"‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


Oldlace 
#FDF5SE6 


Paleturquoise Palegoldenrod 
#AFEEEE #EEE8AA 


Peachpuff Papayawhip 
#FFDAB9 #FFEFDS 
Pink 
#DD/ #FFCOCB 
Purple Powderblue 
#800080 #BOEOE6 
Saddlebrown 
#8B4513 
Silver Seashell 
#COCOCO #FFFSEE 
Snow 


#D8BFD8 


Whitesmoke White Wheat 
#FSFSF5 #FFFFFF #F5DEB3 


1 Û ee | #009900 | #006600 | #003300 | #000000 | 
E Û ee | | #006633 | #003333 | #000033 | 
gS Û e Û1 | #006666 | #003366 | #000066 | 
LD Û er Û | #006699 | #003399 | #000099 | 
Lg ele LeeLee Û ULL | #OOGGCC | #0033CC | #O000CC| 
[HOOFEEE HOOECEEN HOOSSEE EIT EVES EIS 
I Û EI |< | #336600 | #333300 | #330000 | 
E Û Elec |< | #336633 | #333333 | #330033 | 
I Û EI ÛL | #336666 | #333366 | #330066 | 
LD Ee Û | #336699 | #333399 | #330099 | 
Ee ele CELI | #3366CC | #3333CC | #3300CC| 
LSS Ig |g | #336GEF | #3333EF | #3300FF | 
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ت تحميل هذا الكتاب من موقع كتب الجحاسب العربية"™Cb4a.cO wwWW.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


Ig [LX | LI | #666600 | #663300 | #660000 | 
[#6GEECCI] HSGCCS3N HSS EIEN EIEEEEN ESITEEN 
IIS LLI | II | #666666 | #663366 | #660066 | 
EEE EI [LCL | #666699 | #663399 | #660099 | 
Cg lele Teele Lele | #GGGGCC | #6633CC | #6600CC| 
| #6GEFFF | [#66CCEET HSSSSEE EIT EXE EIS 
HSSEEOO | HSSECOON HSSSS00N ESTES EEEEEOY EEE 
LEAS [Fert | FELEK | #996633 | #993333 | #990033 | 
| #99FF66 | [#S9CC66I | #999966 EESTI EEE EEE 
CARE CLIec [FEE | #996699 | #993399 | #990099 | 
#99FFCC HOSCCCC] HSSSICCN LEIS EEE EEE 
_#99FFFF | #9SCCFF | HSSSSEEN EECA EEE EEE 
Le UL) f OLeLeTeDL | ele XI) | #CC6600 | #CC3300 | #CC00001| 
| #CCEF33 | #CCCC33 | HECI] ETE ESEEEE ESSIEN 
#CCFF66 [#ECCEC66 | HECS96Ol LST EFFEC EST 
#CCFF99 HCCCESS HECI EIT 
#CCFFCC #CCCCCC #CCIICC 
#CCFFFF #CCCCEF HECSSEE] EAI EEE EGIT 
| #FFFFOO | #EECEOOI| HEEE ETI EEE EIN 
| #EFFF33 | #EECES HEE EIEN EEE EITEEN 
_ #FFFF66 | #EFCC66  T#EES966 | LIRA TIN EAFESI EAE 
#FFFF99 #FFCC99 #FF9999 
#FFFFCC #FFCCCC #EFSICC] IAI EES EATS 
#FFFFFF #FFCCFF | #FF99FF FAI LAF EAA 


أما كيف تعرف الرمز الخاص باللون الذي تريد اختياره» فيوجد برامج خاصة تستطيع من خلالها دمج الألوان الثلاثة 
بنسب مختلفةء ومن ثم يقوم البرنامج بتوليد الرمز السداس عشري المكافئ للون الناتج. 


بعض المتصفحات لا تتعرف على رموز الألوان إلا بوضع إشارة # قبل 
هذه الرموز» لذلك من الأفضل استخدامها دائماً. 


وبالنسبة لبعض الألوان الأساسية والدارجةء من الممكن استخدام أسماء هذه الألوان مباشرة بدلا من الأرقام السداس 
عشرية. وهذا جدول يوضح هذه الآلوان ومسمياتها: 


ت تحميل هذا الكتاب من موقع كتب الحاسب العربية wwWW. Cb4a. cO"‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


Silver Gray sS 
Yellow اا‎ | Fuchsia ا1ا‎ ۳| 


ونعود إلى الوسوم و خصائصها ... 


<BODY BGCOLOR="#FFFFFF" BACKGROUND="image.jpg"> 


</BODY> 


تقوم الخاصية ۳CK6۸0 N2‏ 84 بتحديد صورة كخلفية (ورق جدران) للصفحة وقد استخدمت الصورة التالية: 


والمسماة ع م.٥108‏ في صفحتي وكانت هذه النتيجة 


C:xhimfiles1 st_file.html [local] - Microsoft Corporation Arabic... FIEÎI E 
Fils Edt Wiaw ao Favorites Help 


ll >-> O0 @ QC 


| Address | Cithtmfiles™l st_file. htrnl 


تلاحظ أن المتصفح قد قام بتكرار عرض الصورة بطريقة التجانب وأنها أصبحت تغطي كل الشاشة. بحيث حجبت 
أيضا اللون الأبيض الذي حددناه كلون الخلفية (من خلال الخاصية )86٤۳0 0R‏ والحقيقة أن اللون يظهر فقط عندما 
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تم تحميل هذا الكتاب من موقع كتب الجاسب العربية"٥c www. Cb4a.‏ 

للمزيك فمن الكتب ي جميع جالات الحاسوب تفضلو بزيارتتا 

لا نقوم باستخدام صورة ما كخلفية. ومع ذلك يفضل تحديده إحتياطا خاصة وأن بعض المتصفحات القديمة توصف بأنها 
متصفحات نصية ؟كإ#وس0إ8 4ءء۲-84×١٠‏ (أي ليس بإمكانها عرض الصور). أو ربما هناك بعض المستخدمين 
الذين قاموا بإلغاء خيار عرض الصور تلقائيا من متصفحاتهم. إذن لنعطهم على الأقل فرصة مشاهدة بعض الألوان إن 
لم يستطيعوا مشاهدة الصور. 


قا فطع انام لر احج فة طراا أر عرض كطفات الفح و المح فة هى الى قن قفا 
بعرضها في وضع التجانب مما يعطي الانطباع بأنها صورة كبيرة. 


ولنكمل مع باقي الخصائص في وسم <805¥>: ربما لاحظت خلال استخدامك للإنترنت أن معظم الوصلات 
التشعبية (وkم1)‏ التي تنقر عليها لتنقلك إلى صفحات أو مواقع أخرى على الشبكة هي دائما مميزة باللون الأزرق»› 
وأن الوصلات التي قمت بزيارتها فعلاً قد تحول لونها إلى القرمزي. حسناء هذه هي الألوان الإفتراضية التي تعتمدها 
المتصفحات. لكن قد لا يعجبك ذلك وتريد تغيير هذا النظام. أو ببساطة ربما تريد استخدام لون أو صورة غامقة لخلفية 
الصفحة بما سيؤدي إلى اختفاء هذه الوصلات أو حتى اختفاء نص الصفحة نفسها. فما العمل؟ 

إليك هذه الخصائص التي تقوم بالتحكم في ألوان النصوص: 


"۴X۲"‏ تحديد لون النص الأساسي للصفحة 
"bععrr#"=K 1N‏ تحديد لون الوصلات التشعبية 
"ع عrr#"=1[NKا ‏ تحديد لون الوصلات التشعبية التي تمت زيارتها )ہنا dعvisit‏ 


"bbععrr#"=L]NK‏ ۸ | تحديد لون الوصلة التشعبية الفعالة أي عندما یتم lلiقر active links lqle‏ 


والاآن› دعنا نجمل الخصائص السابقة في عبارة واحدة. وسوف أكتب الرموز الخاصة بالألوان بنفس تلك الألوان التي 
تمتلها. وألفت نظرك إلى أنه لا أهمية للترتيب في كتابة هذه الخصائص داخل العبارة. 


<BODY BACKGROUND="backimag.jpg" 
BGCOLOR=" 00" 

TEXT="#000066" 

LINK="#OOffOO0" 

VLINK="#ffOOOO" 

ALINK=" "> 


حاول أن تحللها! هل استنتجت أنني قد حددت الصورة عمز.1038)ء4ط كخلفية للصفحة؟ وأنني اخترت اللون الأصفر 
للخلفية (في حالة عدم عرض الصورة السابقة كخلفية)؟ وان النص سيظهر باللون الأزرق الغامق؟ أما الوصلات 
التشعبية فلونها أخضر» والوصلات التي تمت زيارتها ستظهر باللون الأحمر. أما تلك الوصلة الفعالة فستظهر باللون 
الرمادي في لحظة النقر عليها بالفأرة. 


إذا كانت هذه هي استنتاجاتك... فمبروك» لقد نجحت. وكل ما أتمناه أن تكون قد قضيت وقتا ملونا وزاهيا مع هذا 
الد 
رس. 
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ت تحميل هذا الكتاب من موقع كتب الجاسب العربية"™Cb4a.cO www.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


الكرسن اتات 
اا 


هلا وسهلا بك إلى الدرس الثالث من دروس ۷1 1]]. لا زلنا نناقش معا أساسيات تنسيق صفحات الإنترنت والتحكم 
بخصائصها. وسوف نتابع ذلك في هذا الدرس من خلال التعرف على الوسوم الخاصة بالخطوط. 

سوف تلاحظ فى هذا الدرس والدروس اللاحقة أن هناك أكثر من طريقة لأداء نفس العمل» أو إعطاء نفس الخصائص 
لصفحات الإنترنت. وبالمقابل قد يبدو لك أن بعض الوسوم والخصائص متشابهة في تأثيرهاء لكن بالقليل من التدقيق 
والتجربة ستكتشف أن لكل وسم خصوصيته. 


ولنبدا 

راجع صفحتنا البسيطة التي عملنا فيها في الدرسين السابقين. إننا لم نقم بالتعامل مع الخطوط فيها ولا بأي شكل من 
الأشكال. أي أننا تركناها على إعداداتها الافتراضية. 

وبالمناسبة فإن هذه الإعدادات هي خط عادي» نو ع4 "1mes New Roman‏ وحجمە 3 (بمقیاس متصفحات الإنترنت). 


الوسم الأول الخاص بالخطوط هر <FONT/> ... <>FONT<‏ 
وهو يقوم بالتحكم بالخطوط من حيث النوع واللون والحجم. أما الخصائص التي نستخدمها مع هذا الوسم والوسوم الأخرى 
الخطرط فهي کالتالي؛ 


۴٠‏ | تقوم هذه الخاصية بتحديد نوع الخط الذي نريده» وقد نقوم بتحديد أكثر من نوع معاً. وفي هذه 
الحالة إذا لم يتواجد الخط المحدد أولا على جهاز الشخص الذي يتصفح الموقع يتم إعتماد الخط 
الثانى ... وهكذا 


<FONT FACE="Traditional Arabic, Arabic Transparent, Simplified Arabic"> 


i. LOX es 
</FONT> 


طبعا لا تنس أن تتأكد من كتابة أسماء الخطوط بالصورة الصحيحة هجائياً. 


۲ع | أما هذه الخاصية فتحدد لون الخطء وذلك بنفس مبادئ تحديد الألوان التي تحدثنا عنها في 
الرس السابق 
<FONT COLOR="#FFOO0OO">‏ 


... Text... 
</FONT> 


Size‏ ولتحديد حجم الخط نس نستخدم هذه الخاصية. وفقط هناك سبعة أحجام لأي خط تست تستطیع المتصفحات 
التعر فت ليها 
ونقوم بتحديد الحجم المطلوب بأسلوبين: أولهما المباشر. حيث يتم كتابة رقم يتراوح ما بين 1- 
7. أي أننا نختار الحجم الذي نريده مباشرة. 


<FONT SIZE="4"> 
2 TOX: 
</FONT> 
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تم تحميل هذا 


الكتاب من موقع كتب الجحاسب العربيةCb4a.coNn www.‏ 


وإليك نماذج بأحجام الخطوط 


أما الأسلوب الثاني فهو النسبي: حيث تكتب الأرقام من 1 إلى 6 مرفقة إما بإشارة + أو بإشارة 


<FONT SIZE="+4"> 
1. TOX... 
</FONT> 


وفي هذه الطريقة فإن الأرقام 6-1 تمثل درجات التكبير (۳) أو التصغير (-) للخط وذلك نسبة 
إلى الحجم الافتراضي. فمثلا الرقم +4 يعني تكبير الخط أربع درجات عن الحجم الافتراضي 
وهو 3› أي أنه يصبح بالحجم 7. بالمقابل فأن الرقم -1 يعني تصغير الخط درجة واحدة أي 


يصبح بالحجم 2. 
ولتوضيح هذا الأسلوب» إلبك هذه النماذج: 


څا ش3 

ا 7 

خط بحجم -1 

خط بحجم +0 (أو -0 وهو الافتراضي) 
خط بحجم +1 


ا 
خط بحجم +3 
خط بحجہ +4 
خط بحجم +5 


لاحظ أنه حتى في الأسلوب النسبي لا نستطيع الحصول على أكثر من سبعة أحجام للخطوط. 
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TT TRT TT I TT TT og ا‎ 


والآن أعرف ماذا تريد أن تسألء ستقول لقد ثبت حجم الخط على حده الأدنى عند الدرجة -2 وعلى حده الأعلى عند الدرجة 
+4. إذن ما الفائدة من وجود الدرجات الأخرى الأقل من -2 والأكبر من +4؟ 

حسنا وأنا أجيبك بسؤال آخر: ماذا لو قمنا بتغيير الحجم الافتراضي للخط في كل الصفحة إلى 1 بدلا من 3؟ (وسوف نقوم 
بذلك فعلا بعد قليل)» ألا نحتاج في هذه الحالة إلى الدرجات من +1 إلى +6 لتمثيل الأحجام الأكبر منه؟ وإذا قمنا بتحديد 7 
كحجم إفتراضي ألا نحتاج إلى الدرجات من -1 إلى -6 لتمثيل الأحجام الأصغر منه؟ إذن نحن نحتاج فعلاً إلى هذه 

الدرجات لكي نغطي جميع الإحتمالات الواردة. 

أرجو أن يكون هذا الجواب قد أقنعك :-) 


وهذه بعض الأمتلة لتوضح لك كيفية استخدام هذا الوسم» وسوف أرفق نتيجة كل مثال بعده مباشرة. 


<FONT FACE="arial" SIZE="6" COLOR="#FFOOOO"> 
This font is Arial, Size is 6, Color is Red 
</FONT> 


This font is Arial, Size is 6, Color is Red 


<FONT FACE="arial" SIZE="+3" COLOR="#FFOO000"> 
This font is Arial, Size is +3, Color is Red 
</FONT> 


This font Is Arial, Size is +3, 
Color is Red 


<FONT FACE="Times New Roman" SIZE="5" COLOR="#O0O0OOFF"> 
This font is Times New Roman, Size is 5, Color is Blue 
</FONT> 


Thıs font is Times New Roman, Size 1s 5, Color 1s Blue 


<FONT FACE="courier" SIZE="2" COLOR="#800000"> 
This font is Courier, Size is 2, Color is Maroon 
</FONT> 


THiS EON i1S COUFL6rE, Size 15 2, CoOloOE 135 Maroon 


<FONT FACE="Arial" SIZE="5" COLOR="#OOFFOO"> This </FONT> 
<FONT FACE="Times New Roman" SIZE="7" COLOR="#FFOOFF"> is </FONT> 
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<FONT FACE="Arial" SIZE="2" COLOR="#FFO000"> multi </FONT> 
<FONT FACE="Ilmpact" SIZE="4" COLOR="#000000"> colors, </FONT> 
<FONT FACE="Courier" SIZE="2" COLOR="#00O0OFF"> multi </FONT> 
<FONT FACE="Times New Roman" SIZE="3" COLOR="#008080"> faces, </FONT> 
<FONT FACE="Courier" SIZE="6" COLOR="#FFFFOO"> and </FONT> 
<FONT FACE="Arial" SIZE="5" COLOR="#808080"> multi </FONT> 
<FONT FACE="Ilmpact" SIZE="2" COLOR="#800000"> sizes </FONT> 
<FONT FACE="Times New Roman" SIZE="7" COLOR="#OOFFFF"> text </FONT> 


This 1S mur eolors,nu1ci faces, a N O multi sues LEXÛ 


<FONT FACE="Impact" SIZE="6" COLOR="#000000">C </FONT> 
<FONT FACE="Impact" SIZE="6" COLOR="#008080">O</FONT> 
<FONT FACE="Ilmpact" SIZE="6" COLOR="#FFOO0O">L</FONT> 
<FONT FACE="Impact" SIZE="6" COLOR="#O0O0OOFF">O</FONT> 
<FONT FACE="Impact" SIZE="6" COLOR="#800000">R</FONT> 
<FONT FACE="Impact" SIZE="6" COLOR="#FFOOFF">S</FONT> 


ننتقل الآن إلى الوسم الثاني من الوسوم الخاصة بالخطوط وهو <1 ۸S 8٤۴0 ×N‏ 8>. 

وعمله هو تحديد نوع الخط وخصائصه بالنسبة للصفحة كلها . أي أنه يقوم بتعريف نوع الخط الأساسي الذي سيستخدم في 
الصفحة من بدايتها إلى نهايتها ويحدد لونه وحجمه, 

هل لاحظت انه وسم مفرد ولا يحتوي على وسم للنهاية؟ بالطبع ما الحاجة إلى وسم النهاية طالما أنه يتعامل مع الصفحة 
ككل ومع الإعدادات الأساسية لهاء وليس مع كلمة أو سطر أو فقرة بذاتها. لذلك فإن هذا الوسم يكتب عادة في أول الملفء 
ويفضل مباشرة بعد وسم <۷ 805>. أما الخصائص المستخدمة معه فهي نفس الخصائص سالفة الذکر مع <۸1 ۴0> » 
(نستطيع استخدام الخاصية Name‏ معeھ‏ بد .(Face ja‏ وبنفس الطريقة وبدون آي اختلافات. وإليك هذه الشيفرة كمثال: 


<BASEFONT Name="Arial" COLOR="#FFOOO0O" SIZE="5"> 


وبدراسة هذا المثال نستنتج أنه يقوم بتعديل الخط الافتراضي للصفحة بحيث يصبح نوعه هزع وحجمه 5 ولونه أحمر. 
وبالتالي فإن كل النصوص المكتوبة في تلك الصفحة سيطبق عليها هذا النمط من الخط. ما لم نقم طبعا باستخدام الوسوم 
<۴> ... </ا ۴0> لتعديلها والتحكم بمظهر ها كما فعلنا في الأمثلة السابقةء فهي أكثر تحديدا وأكثر مرونة من الوسم 
<BASEFONT>‏ 


وبمناسبة الحديث عن الألوان وتغيير اللون الأساسى لنص الصفحة. ألا تذكر أننا فى الدرس السابق تكلمنا عن الخاصية 
)»هآ التي تكتب مع الوسم <رل 80> والتي استخدمناها لتحديد لون نص الصفحة... أنا لا زلت أذكر ذلك. 

لا يوجد تعارض بين هذه الخاصية وخاصية 10اه في الوسم ۸S ٤۴0 N1<‏ 8> فأنت بكل بساطة تستطيع استخدام أي 
منهما في صفحتك. وإذا حدث واستخدمت كلاهما فإن اللون المحدد مع الوسم <1 ۸S ٤۴0 N‏ 8> هو الذي سيطبقه 


المتصفح ويعتمد 


هناك وسوم خاصة تستخدم لتمييز العناوين وعمالهه1 في صفحات الإنترنت وهي: 


</Hn> ... <Hn> 
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وحرف ۾ هو رقم بين 6-1 يمثل مستوى العنوان. 
<H1> Heading 1 </H1>‏ 
<H2> Heading 2 </H2>‏ 
<H3> Heading 3 </H3>‏ 
<H4> Heading 4 </H4>‏ 


<H5> Heading 5 </H5> 
<H6> Heading 6 </H6> 


Heading 1 
Heading 2 


Heading 3 


Heading 4 


Heading 5 


Heading 6 


ونأتي الآن إلى التنسيقات والتأثيرات التي يمكن إضافتها إلى النصوص. وفيما يلي الوسوم الخاصة بها متبوعة بمثال 
ونتيجته: 
* الخط الغامق (الأسود العريض)» ونستخدم له الوسوم التالية: 


<B> ... </B> 
<STRONG> ... </STRONG> 


This is Bold Text <B> Bold Text </B> 
This is Strong Text <STRONG> Strong Text </STRONG> 
الخط المائل‎ * 
<I> ... </> 
<EM> ... </EM> 
This 1s Italic Text <I Italic Text </P> 
This is Emphasized Text <EM> Emphasized Text </EM> 
الخط المسطر‎ * 
>0< ... <لا/>‎ 
This is Undelined Text <U> Undelined Text </U> 
الخط المر تفع‎ * 
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<SUP> ... </SUP> 


This is SuPerseript Text <SUP> Superscript Text </SUP> 
الخ لفن‎ 
<SUB> ... </SUB> 
This 1S Subscript Text <SUB> Subscript Text </SUB> 
خط کبیر‎ * 
<BIG> ... </BI6> 
This is Big Text <BIG> Big Text </BIG> 
خط صغير‎ * 
<SMALL> ... </SMALL> 
This is Small Text <SMALL> Small Text </SMALL> 


<STRIKE> ... </STRIKE> 


<S> ... </S> 
This is StrHced Fext- <STRIKE> Striked Text </SRTIKE> 
This is StrHeed Fext too <S> Striked Text </S> 
نص الالة الطابعة مم رآ۲1‎ * 
<TT>... </TT> 


This is TeleType Text <TT> TeleType Text </TTI> 


وهذا النص يعرف أيضا بالنص موحد المسافات 1٥×٤‏ 4ءء2مء۷0,0. ولتوضيح هذا المفهوم إليك المثال التالي: 
إذا أخذنا الحرفين ,ص وكتبنا كل منهما عشر مرات متتالية نلاحظ أن المساحة التي شغلها الحرف ص هي أضعاف المساحة 
التي شغلها الحرف 1¡ 


1111111111 
MMHNMMHNMMMNH 


أما عند استخدام الوسم <۲1> ... >/١1<‏ فإن المساحة التي يشغلها كلا الحرفين تصبح موحدة 
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a a E e E 
MMMMMMMMMM 


وهذه أمثلة تجمع بين عدة تنسيقات معاً: 


<B><|><U> 
This is a Bold, Italic and Underlined Text 
<>/U> </|> </B> 


This is a Bold, Italic and Underlined Text 


<FONT COLOR="#FFO00O0" SIZE="+3"><U><|> 
This text is red, size +3, Italic, and Underlined 
</|l> </U> </FONT> 


This text is red, size +3, Italic, and 
Underlined 


وقد أردت من هذه الأمثلة توضيح مسائل معينة أولها: أن بإمكاننا استخدام عدة وسوم وتنسيقات معا في نفس الوقت ولنفس 
المقطع من النص. (وذلك لجميع الوسوم وليس فقط لوسوم الخطوط). وكما ذكرت سابقاء لا أهمية لترتيب هذه الوسوم ولا 
أيها ورد أولا... لكن 

عند استخدام الوسوم المتعددة في مقطع واحد يجب مراعاة عدم التداخل بينها!... كيف؟ أنظر إلى الرسم التالي: 


اا 2 1 
اسوم معدانحلة ببمضها البعض 
الوسرم الت بترتیب معن الوسم الذي دا به اول هيه آي أ 

وأشيت بس الترتيب امک صحین 


فكتابة الوسوم السابقة بالطرق التالية هو خطا: 


<B><|><U> 
This is a Bold, Italic and Underlined Text 
</B> </|> </U> 


<B><|><U> 


This is a Bold, Italic and Underlined Text 
</B> </U> </|> 
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أعرف أنك لم تصدقني وأنك قمت بتجربة هذه الوسوم وربما حصلت على نتيجة صحيحة. حسنا العبرة ليست في عبارة 
واحدة مكونة من وسمين أو ثلاثة تكتبها في ملف صغير بل في صفحة إنترنت كاملة قد تتالف من مئات أو حتى آلاف 
الوسوم مكتوبة في ملف خال من الأخطاء المنطقية والتداخلات التي قد تسبب الإرباك للمتصفحات» وتؤدي إلى عدم عرض 
ف ف ل ا اف 
لذلك فأهمية أن تتجنب وجود الوسوم المتداخلة في صفحتك هو بنفس الأهمية التي يجب أن توليها لكتابة هذه الوسوم 
بالصورة الصحيحة إملائيا. وإلا فالمتصفحات لا ترحم. وكثيرة هي المرات التي حصل فيها المصممون على صفحات 
منهارة بسبب نسيان حرف واحد أو إشارة مثل < أو > أو " 
بإختصار شديد... وكقاعدة أساسيةء الصفحة المصممة جيدا هي الصفحة ذات الوسوم الصحيحة وغير المتداخلة. 
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الدرس الرابع 

0 44 

الفقرات والقوائم 
في هذا الدرس سوف نناقش الوسوم الخاصة بالفقرات بشكل خاص وترتيب الصفحات وتنسيقها بشكل عام. 
صحيح أن استخدامك للألوان والرسومات في الصفحة يضفي عليها نوعا من الحيويةء وأن الخطوط تعطي صفحتك 
رونقا وجمالا. لكنك إن لم تهتم بترتيب صفحتك أو تقضي بعض الوقت في تنسيق هيكلها العام وتنظيم فقراتها وقوائمهاء 
اناهن ااضدب عاك العصو ل على تفه رب ناهد .ذال نه هن الخطرة إلى لحي اهام ل اتر أن اقره 
لفطك رقن غه فم الخطرط اريت الف 


لقد قمت في الدرس الأول بإيضاح بعض الوسوم الخاصة بالفقرات. ولا بأس من تذكيرك بها. فالوسم <۴> يقوم بإنهاء 
الفقرة. والوسم <8> ينهي السطر الحالي وينقل النص إلى سطر جديد. والوسم & ;م10 يقوم بإضافة الفراغات» 
ويجب تكرار كتابته بنفس عدد الفراغات المطلوب. 

ونتابع في هذا الدرس مع هذه الوسوم وغيرها. 


تحذيد إتجاد افر ة ر تجاه التصن فها حيت كك مه الخضاكصن 5|۸ A116 N,‏ 


فالخاصية ۸16١‏ تحدد محاذاة الفقرة وهي تأخذ القيم Center, Rig ,]e۴‏ وأوضحها بالأمثلة التالية: 
<P Align="left"> This is a left-aligned paragraph </P>‏ 


This is left-aligned paragraph 


<P Align="right"> This is right-aligned paragraph</P> 


This is a right-aligned paragraph 


<P Align="center"> This is a centered paragraph</P> 


This is a centered paragraph 


كذلك لتوسيط الفقرات أو الكائنات بشكل عام في الصفحة نستطيع استخد لٺم <CENTER/> ... <CENTER>‏ 
<CENTER> This is a centered text </CENTER>‏ 


This is a centered text 


أما الخاصية 01۸ والتي نستخدمها أيضا مع <۴> فتقوم بتحديد إتجاه قراءة النص وتأخذ القيم 
[1R‏ | إتجاه النص من اليسار إلى اليمين (Left 10o Right)‏ 
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(Right 1o Left) رluıll إتجاهہ النص من اليمين إلى‎ R11 


(تذكر هذه الخاصية جيدا فهي مهمة عند كتابة صفحات باللغة العربية) 


ولتنسيق الفقرات أيضا يوجد الوسوم 

>/٥L0€KQUOTE< ... > BLOCKQUOTE>‏ أي وسوم الفقرات المقتبسة. ووظيفتها تمييز الفقرة من خلال 
إدراج مسافة إضافية على الهامشين الأيمن والأيسر لها. 

والحقيقة أنك تستطيع وضع عدة وسوم معاً إذا أردت إدراج هوامش أكبر. كما في المتال التالي: 


<BLOCKQUOTE> 
<BLOCKQUOTE> 


النلص هنا 


</BLOCKQUOTE> 
</BLOCKQUOTE> 


وبالطبع ليس شرطا أن تستخدم هذا الوسوم مع الفقرات المقتبسة فقط. فأنا مثلا أضعها في بداية ونهاية كل صفحة من 
صفحات هذا الموقع. وبالتالي يظهر النص بعيدا قليلا عن حاشية الصفحة فهذا أفضل من أن يكون ملاصقا لها وأجمل. 


والآن تأمل هذا الشكل وحاول أن تستنتج كيف قمت بإعداده...!؟ 
D cC B A‏ 
H G E E‏ 
K J 1‏ 1 
P O N M‏ 
S R 9‏ 1 


ربما توصلت إلى ني استخدمت عدداً كبيرآ من وسوم الفراغات :مط ونهاية السطر <8۸>. حسناء إستنتاجك لا 
بأس به ولكنه ليس دقيقا فأنا لم أستخدم أياً من هذه الوسوم هنا. بل كل ما فعلته بعد إعداد هذا الشكل هو وضعه ضمن: 


<PRE> ... </PRE> 


وهما اختصار Prefor mated nla‏ أي المنسق مسبقاً. وبالفعل فقد احتفظ هذا الشكل بالتنسق المسبق الذي تم إعداده 
يبه. لکن تم تحويل الخط إلى خط موحد المسافات ولو لم أقم بوضعه ضمن هذه الوسوم لكانت النتيجة كالتالي: 


ABCDEFGHIJKLMNOPQRST 


لاحظ أن هذا الوسم يستخدم مع الفقرات التي لا نحتاج فيها إلى تنسيقات متعددة للخطوط أو الألوان. بل فقط مع الفقرات 
العادية موحدة الخط والتنسيقات. 
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04 
القوائم 
تحتوي لغة ا11 على مجموعة من الوسوم الخاصة بتنظيم البيانات في قوائم وباستخدام عدة خيارات. وهناك 
نوعين من القوائم: 
أولهما المتسلسلة sأءا‏ ١٥إ٥ل۲إ0.‏ واليك المثال التالي عليها 
أسماء بعض المدن الفلسطينية 


القدس 


طولكزم 


وثانيهما القوائم غير المتسلسلة ءون e4‏ ل0۲ n‏ وهذا مثال عليها 


ت ڄ دن خط ئ ڪځ 


ه جامعة النجاح 
ه٠‏ جامعة القدس المفتوحة 
٠‏ جامعة بيرزيت 


حا الكل 


عند التعامل مع القوائم بنوعيهما نحتاج إلى وسوم خاصة بتحديد بداية ونهاية القائمة ووسوم تحدد بنود هذه القائمة. 
بالنسبة للقوائم المتسلسلة نستخدم الوسوم 


</OL> ... <OL> 


أما بالنسبة للقوائم غير المتسلسلة فنستخدم 


</UL> ...<UL> 


ولتعيين كل بند من بنود القائمة نستخدم الوسم <1> وهو وسم مفرد يكتب في بداية السطر الخاص بكل بند ائ 
.Ttem‏ 


إذن عندما قمت بإنشاء القوائم السابقة استخدمت الشيفرة التالية: 


<OL> 
القدس<|ا>‎ 
نابلس<|_1>‎ 
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الله رام<اا> 
الخليل<اا> 
جنین < |> 
طولکرم<|ا1> 
</OL>‏ 


>JL> 

النجاح جامعة<اا1> 

جامعة القدس المفتوحة<|1> 
بیرزیت جامعة<|1> 

جامعة الخليل<|ا1> 
</UL>‏ 


والخاصية الوحيدة التي تستخدم مع هذه الوسوم هي 1۲۴۴٤‏ ووظیفتھا تحدید شکل الرمز الظاهر مع بنود القائمةء 
وعادة تستخدم مع وسوم بداية القوائم <1> أو <0> وبذلك نحدد رمزآً واحدا لكل القائمة. ولكن نستطيع استخدامها 
أيضا مع وسم البنود <1> لإعطاء تحكم أكبر في مظهر القائمة من خلال تحديد رمز مختلف لكل بند. 


فعند وضعها ضمن تعريف القوائم المتسلسلة تأخذ القيم: 1 ,1 ,ج ,4 التي تغير رموز الترقيم من الأرقام العادية 


الإفتراضية (والتي رمزها 1) إلى ترقيم باستخدام الأحرف اللاتينية الكبيرة أو الصغيرة»ء أو باستخدام الأرقام الرومانية 
كما ترى في الجدول التالي: 


<OL TYPE="i"> <OL TYPE="I"> <OL TYPE="a"> <OL TYPE="A"> 


1 .1 a .A 
11 II b .B 
1li .II c .C 
1v .V d .D 
Vv .V e Ê 


والحديث عن هذه الخاصية يقودني إلى الحديث عن مسألة مهمة في لغة ا11 وهي مسألة الوسوم والخصائص 
المحددة بمتصفح معين دون غيره أي التي تعمل مع أحد المتصفحات ولا تعمل مع غيره. 


والسبب في ذلك أن هذه الخاصية تستخدم أيضا مع القوائم غير المتسلسلةء لكن ليس بصورة مطلقة...كيف؟ أنت ترى 
أن الرمز الموجود عند كل بند في القائمة هو عبارة عن نقطة سوداء يطلق عليها اسم ٥ء1‏ وهي المعرفة ضمنا في 
خاصية ۴۴ ۲۲. لكن هناك رموز أخرى يمكن إظهارها وهي المربع ١4۲٠٩ء,‏ والدائرة المفرغة 16١٣ء‏ وتعرف 
بالشكل التالي: 


<UL TYPE="square"> 
<UL TYPE="circle"> 


ولكن للأسف هذه الخاصية لا تعمل ولا يظهر تأثيرها إلا مع متصفح نيتسكيب وليس مع مايكروسوفت إكسبلورر الذي 
يتعامل فقط مع القيمة الإفتراضية للخاصية. (رجاءَ لا يغضب مستخدمو إكسبلورر فهناك الكثير من الوسوم والخصائص 
التي لا يستطيع نيتسكيب عرضها أيضا). 

ولاتمام الحديث عن القوائم» أذكر لك أن هناك وسوما أخرى تستخدم لإنشاء القوائم غير المتسلسلةء وبنفس الطريقة 
AR E‏ 
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<DIR> ... </DIR> 
<MENU> ... </MENU> 


هناك نوع خاص من القوائم يدعى قوائم الشرح أو التعریفات ایا ۸١٥٤1,آگfە(‏ وما يدل الإسم تستخدم عندما نرید 
إدراج قائمة من المصطلحات يتبع كل واحد منها شرح أو تعليق. 
HTML‏ 
Hyper Text Markup Language‏ 
WWW‏ 
World Wide Web‏ 
FTP‏ 
File Transfer Protocol‏ 
GIF‏ 
Graphical Interchange Format‏ 
JPG, JPEG‏ 
Joint Photographic Experts Group‏ 


رتام كاد هة اقرا ال اة وسر 

الأرل <0> ... <[21/> لتعريف بداية ونهاية القائمة. 

والثاني <1> ويوضع قبل كل مصطلح لتحديده» وهو وسم مفرد. 

ا الات قير < اا هي رمع ارح اى اقلق رهي أضا مر د را ان ك > فة لاا 


<DL> 

<DT>HTML <DD>Hyper Text Markup Language 
<DT>WWW <DD>World Wide Web 

<DT>FTP <DD>File Transport Protocol 

<DT>GIF <DD>Graphical Interchange Format 

<DT>JPG, JPEG <DD>Joint Photographic Experts Group 
</DL> 
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الوس الكان 
الصور والرسومات 


في هذا الدرس سوف أقوم بالحديث عن الصور والرسومات وما يتعلق بالتعامل معهاء بالإضافة إلى التعريف بأنواع 
الملقات الرسرهة لار كه فى التر فت 


ONES Ka 


صورة؟ كلاء بالطبع يجب أن نحدد الصورة التي نريدها. لذلك نضيف الخاصية له ٣۸؟‏ لتحديد موقع واسم الصورة. 


الصورة التالية إسمها عمز.٥٣0لعط]‏ وعندما قمت بإدراجها. كانت الشيفرة الخاصة بذلك هي 


<IMG SRC="thedome.jpg"> 


والضة هد فرظ أن الور مورد ف اف الف اقرع ان الم حت و اف 6 لان اع 
علیه» وقمت باستدعاء الصورة من خلاله. لكن ماذا لو كانت الصورة في مجلد فرعي آخر؟ حسنا سوف اناقش معك 
القن لبا الا 


الحالة الأولى أن تكون الصورة موجودة في مجلد متفرع عن المجلد الموجود به ملف ا۲۷[ حسب الشكل التالي: 


الميقد حيت تتو ايد المورة i htnfiles‏ 
E‏ 


[9] 1st_file.him sc. HEM] iia 


سط الشيغرة 


IHS SREC="imagqes thedome . PT"? 


نقوم في هذه الحالة بكتابة إسم هذا المجلد تتبعه إشارة / ثم اسم الصورة. 


الحالة الثانيةء أن يكون ملف [1M]‏ موجوداً في مجلد ما وتکون الصورة موجودة في مجلد آخر بنفس المستوى. أي 
أنهما مجلدين متجاورين وليسا متفرعين أحدهما عن الآخر. 
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a. HEMÎ زف‎ 


الصور ةد .ي Hj thedome.jpg‏ ا 
سط قر د 


IHG SRC=". . Jimaqeaa jJthedome . jpg"? 


وفي هذه الحالة نكتب .. (نقطتين) لتوجيه المتصفح للخروج من المجلد الفرعي الحالي (حيث يوجد ملف ا١11(‏ 
ومن ثم الدخول إلى المجلد sSءعة‏ 1 حيث توجد الصورة. 


ويشكل عام» مهما كانت مواقع تواجد الملفات فإن عملية تحديد مواقعها والوصول إليها لا تخرج عن نطاق هذا النمط 
من الشيفرة. أي كتابة النقطتين للخروج من مجلد فرعي» وكتابة اسم المجلد الذي يجب الدخول إليه. 


إن الأبعاد الأساسية هذه الصورة هي 145×200 بیکسل Pixel‏ وکما تلاحظ تم إدراج الصورة مع المحافظة غل هذه 
الأبعاد. ومع ذلك فنحن نستطيع التحكم أيضا بها وإظهار الصورة بالحجم الذي نريده من خلال هذا الوسم. كيف؟ 
بإضافة الخصائص 12(1131 ,1۴1611 متبوعة بأرقام تمتل الإرتفاع والعرض المطلوبين. 


<IMG SRC="thedome.jpg" HEIGHT="70" WIDTH="120"> 


كاف لق الت تح مع حع ف 7ة رفا حك ها ا بر مكل الور وها اتن با 
کضوا فا کن ل انار العور 5 یر فل ق الاح ۔ کیا لے مر کے اتر نے ف 
تحميل الصور وخاصة في المواقع بطيئة التحميل. 


<IMG SRC="thedome.jpg" ALT="The Dome Of The Rock"> 


عندما نقوم بإدراج صورة ضمن فقرة فإن موقع ظهورها يتحدد بالطبع حسب ترتيب ورودها في الفقرةء مثلها مثل أي 
كلمة أو عبارة أخرى. ونستخدم الخاصية ۸16١‏ لتحديد محاذاة الصورة مع النص المرافق لها أو لنقل بعبارة 

أخرى: تحديد موقع النص الذي يليها بالنسبة لها وهي تأخذ القيم: ?10 MIDDLE, LEFT, ,80TTOM,‏ 
61 ]۴ وأوضح لك تأثير كل قيمة كما يلي: 
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في الحالة العادية [# |(مثل هذه) وعندما لا نقوم بتحديد أي محاذاة فإن النص الذي يلي 
الصورة يظهر بمحاذاة الحافة السفلى لها. و هذه هي الحالة الإفتراضية لظهور الصور والتي 
تمثلها القيمة |80110 

<IMG SRC="image.jpg" ALIGN="BOTTOM'"> 


TOP 


2 وعند تحديد هذه القيمة فإن السطر الأول من النص الذي يلي الصورة يقع 
بمحاذاة الحافة العليا لها. أما باقي النص فيمتد أسفلها. 


<IMG SRC="image.jpg" ALIGN="TOP"> 


MIDDLE 


اا عند تحديد هذه القيمة فإن السطر الأول من النص يقع بمحاذاة منتصف الصورة. 
كذلك فإن باقي النص يمتد أسفلها. 


<IMG SRC="image.jpg" ALIGN="MIDDLE"> 


LEFT 


هذه القيمة تؤدي إلى محاذاة الصورة إلى أقصى اليسار. مع التفاف النص الذي 
يليها على الجهة اليمنى ولعدة أسطر حسب ارتفاع الصورة. 


<IMG SRC="image.jpg" ALIGN="LEFT"> 


RIGHT 


أما هذه القيمة فتؤدي إلى محاذاة الصورة إلى أقصى اليمين. مع التفاف النص 
«ga?‏ لذي يليها على الجهة اليسرى ولعدة أسطر حسب ارتفاع الصورة. 


<IMG SRC="image.jpg" ALIGN="RIGHT"> 
والآن بعد أن قمنا بتحديد محاذاة الصورة نحتاج إلى تحديد المسافة الفاصلة بينها وبين النص الذي يجاورها. ونستخدم‎ 
لذلك الخصائص التالية:‎ 
لتحديد المسافة العمودية الفاصلة بين النص والحافتين العليا والسفلى للصورة.‎ :۷SPA ۳٤ 
اتحديد المسافة الأفقية الفاصلة بين النص والحافتين اليمنى واليسرى للصورة.‎ :]SP A٣٤ 
مثال:‎ 


<IMG SRC="image.jpg" ALIGN="RIGHT" VSPACE="20" HSPACE="20"> 
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النتيجة: هذه الشيفرة ستدرج الصورة المسماه 
image. (Cg?‏ مع محاذاتها ليمين الصفحة 
وإضافة مسافة فارغة مقدارها 20 بيكسل 
على الجهات الأربعة. (قارن بين هذا الإطار 
والإطار السابق الذي وضحت فيه خاصية ۸16۸ مع 
القيمة ۸1611. ولاحظ المسافة بين الصورة والنص 
المرافق لها.) 


الخاصية الأخيرة والتي تستخدم مع الوسم <6 1> هي 80۸2٤۸‏ ووظيفتها إضافة إطار حول الصور والتحكم 
که وهه الخاضیا کے کن خان فك فن ضور ها كرفا فش رت لتك انك من خا اسن 
رقم يمثل السُمك بالبيكسل. والقيمة الإفتراضية له هي 0 أي لا يوجد إطار حول الصورة. 

مق لضاف ظا مك 5 مكل نك افر الذاة: 


<IMG SRC="image.jpg" BORDER="5"> 


والآن حان الوقت لكي نناقش معا بعض الأمور التي نتعلق بالصور والرسومات بشكل عام. 


* هل حاولت أن تتعرف على أنواع الملفات الرسومية التي تقوم بتحميلها خلال تصفحك لمواقع الإنترنت؟ 

يزخر عالم الكمبيوتر بالعشرات من أنواع الملفات الرسومية وتنسيقات الصور. وكل منها يختلف عن غيره من عدة 
نواح» آذكر لك منها: الدقةء وعدد الالوان التي يستوعبهاء والحجم التخزيني للملف. لكن هناك نوعين فقط من هذه 
الملفات يتم تداولهما حالياً في الإنترنت وهما: 


JPEG ,JPG 
ويدعم هذا التنسیق صورا بعیار 24 بت (أي 16.7 ملیون‎ .Group Experts Photographic Joint إختصار ل‎ 
لون). وميزة هذا التنسيق تتمثل في إمكانية ضغط الصور بنسب مختلفة عند تخزينها وبالتالي الحصول على صور‎ 

صغيرة الحجم نسبيا.(أعني هنا حجم التخزين بالكيلوبايتات وليس أبعاد الصورة). لكن بالمقابل كلما إزدادت نسبة 
الضتط وضخر جم الملف كان ذلك على حساب الجودة والوضوح 


GIF 
وأقصى عدد للألو ان في هذا التنسيق هو 265 لون. ومع ذلك فإن‎ Format Interchange Graph¡ca1 إختصار ل‎ 
أحجام الصور المخزنة به كبير نسبياً مقارنة بتنسيق 6[. لكن هناك مزايا رائعة ينفرد بها تنسيق 61۴ مما يستدعي‎ 
استخدامه في صفحات الويب» أولها القدرة على تخزين صور بخلفيات شفافة كععهد"[ ١٣٥٣2مءمه1۲ وثانيها الصور‎ 

lنnتڪحركة Animated Gifs‏ 
والآن قد تسأل»ء أي من هذين التنسيقين أستخدم في صفحاتي؟! لا يوجد جواب قطعي لهذا السؤال لكن إليك هاتين 
المعادلتين : 


6[= الصور الحقيقية ذات العدد الكبير من الألوان» وذات الأبعاد الكبيرة 
۴= الصور قليلة الألوان وصغيرة الأبعاد متل الأزرار. 
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* ما هي درجة إستبانة شاشتك ٤10٥١‏ ٠ا01ءع‏ 7۸8 إذا كنت لا تعرف الجواب قم بفتح لوحة التحكم (e1مaم‏ 01عدرهء) في 
ويندوز وإختر أيقونة العرض(رهامءال) ثم اختر التبويب إعدادات (كئع,ذااهء) وهناك سوف تشاهد مساحة سطح 
المكتب (١٥0نااآهوهإ‏ «ءءإءء) الذي يدل على درجة إستبانة الشاشةء وعلى الأغلب ستكون 480×640 أو 
600<0» وهناك درجات أعلى تعتمد على قدرة محول العرض. كذلك سوف تشاهد لوح الألوان (راناهu¶‏ إoاهء)‏ 
الذي يدل على عدد الألوان التي يمكن عرضها بالإعدادات الحالية للشاشة. 

أما في ويندوز 3.11 أو 3.1 فاختر أيقونة برنامج إعداد لم۷1 من لوحة التحكم فتظهر لك قائمة تجد بضمنها 
وغ وسكت اغا 


هذا الحديث يقودني إلى وحدة البيكسل ۴1×٥1‏ وهي اختصار ل ٤٫عصطع[٤‏ عإں†ء۴1. إذا كانت شاشتك بإستبانة 
48000 فهذا يعني أنها مقسمة(نظريا) إلى شبكة من 640 عمود و480 سطر . وبمنتهى البساطة» ان كل خلية من 
هذه الشبكة تمثل بيكسل وبالطبع كلما زادت الإستبانة كلما صغر حجم وحدة البيكسل. 


* هل سبق لك وأن سمعت بمصطلح 1ن4٣‏ اط1 ضمن مصطلحات الإنترنت؟ حسناء لا تلتفت إلى الترجمة الحرفية 
لهذه الكلمةء والتي تعني 'ظفر الإبهام". فالمقصود حقيقة بها هي تلك الصورة الصغيرة جدا التي تقوم بالنقر عليها فتؤدي 
إلى عرض صورة بحجم أكبر. لذلك قد يكون المصطاح الأنسب لوصفها هو "العيّنة". 

(وإذا كنت قد زرت أحد المواقع الإخبارية لرأيت كيف يتم عرض عينات وصور مصغرة للقطات الأحداث وعند النقر 
على العينة تظهر الصورة الأصلية. إذن أنت لست مجبرا على الإنتظار لوقت طويل لحين ظهور صورة ذات حجم 


ومن الواضح أن استخدام العينات مفيد وعملي جدا وأن وضعها في المواقع التي تحتوي على العديد من الصور يؤدي 
إلى تقليل الزمن اللازم لتحميل الصفحات وتجنب ضياع الوقت بانتظار ظهور الصور الأصلية كبيرة الحجم. لأنها 
تعطي الزائر الحرية في النقر عليها إذا رغب في رؤية الأصل أو تجاهلها. أما كيف يتم عمل هذه العينات؟ فذلك 
باستخدام أحد برامج معالجة الرسوم كبرنامج ۴۲١‏ ص0ط؟ ا«ذه۴. بتصغير أبعاد الصور الأصلية إلى النسبة المطلوبة. 


أعرف ماذا ستسأل الآن» ستقول ألم نتعلم قبل قليل كيفية عرض الصور مع التحكم بأبعادها؟ ألا يؤدي استخدام 
الخصائص WIDTH, HEIGHT‏ إلى التحكم بحجم الصور وعرضها بنسب مصغرة حسب ما هو مطلوب؟ 

إن استخدامك لهذه الخصائص يؤدي إلى إظهار الصورة بحيت تبدو مصغرة» لكنك فعليا قمت بإجبار متصفح الزائر 
على تحميل الصورة بالحجم والأبعاد الأصلية ثم عرضها بالحجم المصغر أي أنك في النهاية لم تحقق الغاية من وجود 
هذه العينات. 
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الدر س السادس 
الوصلات التشعبية 


.Links‏ .. أو الوصلات التشعبية هي روح الإنترنت. وإذا كانت الإنترنت بمجملها هي شبكة العنكبوت فإن هذه 
الوصلات هي الخيوط التي تشكل هذه الشبكة وتؤلف حلقات الوصل بين الملايين من مواقعها. تنقر على وصلة ما 
فتنقلك إلى صفحة أخرى في نفس الموقع. .. وتنقر على وصلة أخرى لتنقلك كليا إلى أحد المواقع في الجانب الآخر من 
العالم. .. وصلة تجعلك تحمل ملفا وأخرى تجعلك تشغل مقطعا موسيقياً وثالثة تعرض لك صورة... 

SEO GY CE‏ الوصلات التشعبية في صفحاتك.. . لقد 
صدق استنتاجك لذلك هيا إلى العمل.. 


فاكف غه خار ك الرصات اة ها ن كرون لزه لوق آخر ار ن كرون تفه أخرى اكل النرقع 
نفسه»ء ومنها أن تكون لمكان آخر في نفس الصفحة (إلى أعلى أو أسفل على سبيل المتال) أو أن تكون وصلة لعنوان 
بريد إلكتروني 8-1211 وفي جميع الحالات فإن المبداً واحد لكن تختلف بعض التفاصيل. وسوف أناقش معك كل حالة 
عل خد وفاتفضال: 


نستخدم الوسوم </A> ... <A>‏ کوسوم أساسية لإدراج الوصلات التشعبية» وهي اختصار لکلمة .Anchor‏ وهي ل 
تعمل لوحدها بل تتطلب إضافة خصائص معينة أولها وأهمها الخاصية ٥۸٤۴‏ التي نحدد من خلالها الموقع الذي نريد 
الد لالة علیه» ويجب أن يكتب عنوان الموقع كاملا. 


لحالة الأولى: إدراج وصلة تشعبية تشير إلى موقع خارجي. 
E‏ وواه 
akhr.comء.tp://wwwط‏ في هذه الحالة يتم كتابة الشيفرة بالشكل التالي: 


<A HREF="http://www.sakhr.com"> </A> 


لكن بقي شيء واحد وهو العبارة أو الكلمة التي سيتم النقر عليها لتشغيل الوصلة»ء وهذه يجب أن توضع بين الوسمين 
<4> ... <4/>. أي لكي تكتمل الوصلة السابقة يجب أن نكتب معها أي عبارة نريدهاء لكي ينقر عليها الزائر فتنقله 
إلى العنوان المطلوب. ما رأيك بعبارة: 1١ S4) 8R‏ 60 والتي تصبح الشيفرة معها بالشكل التالي: 


<A HREF="http://www.sakhr.com">Go To SAKHR</A> 
وتظهر الوصلة كما يلي:‎ 
Go To SAKHR 


لم تعجبك؟ ليس ذلك مشكلة فأنت تستطيع كتابة أي شيء تريده كعنوان للوصلة التي تريدها. ما رأيك لو جعلنا كلمة 
3K HR‏ هي فقط العنوان لهذه الوصلة. 


Go To <A HREF="http://www.sakhr.com">SAKHR</A> 
Go To SAKHR 
بل إنك تستطيع إدراج صورة أو (زر) كبديل عن الكلمات -كما تشاهد في الكثير من المواقع- وكل ما عليك فعله في‎ 
هذه الحالة هو كتابة الوسم الخاص بإدراج الصورة بين الوسمين <4> ... <4/> بالشكل التالي:‎ 
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<A HREF="http:/www.sakhr.com"><IMG SRC="sakhrlgo.gif"></A> 


والذي يؤدي إلى ظهور الصورة التالية كوصلة تشعبية لموقع صخر 


وبشكل عام فإن أي شيء يوضع بين الوسمين <4> ... <4/> سوف يكون الوسيلة أو العنوان الذي ينقلنا إلى الموقع 
المقار اليه في الرضط التتعيية راء كان ها ايء نضا ب ضررة ر كاهمامهاء. 


والآن هل تلاحظ الإطاز الظاهر حول الصورة وهل قذكر متى فما بالحديث عن هذا التوع من الإطارات؟ نعم في 
الدرس السابق. عند إدراج صورة كوصلة تشعبية يظهر حولها إطار سمكه 2 بيكسل وهذه هي الحالة الإفتراضية. 


<A HREF="http://www.sakhr.com"><IMG SRC="sakhrlgo.gif" BORDER="0"></A> 


أو حتى تكبيره بكتابة السمك المطلوب مع هذه الخاصية. 


<A HREF="http://www.sakhr.com"><IMG SRC="sakhrlgo.gif" BORDER="6"></A> 


ننتقل الآن إلى الحالة الثانية» وهي أن تشير الوصلة التشعبية إلى ملف موجود في نفس الموقع (أي ملف محلي) سواء 
كان ملف 11۷1 أو صورة أو غير ذلك. وفي هذه الحالة فإن ما يكتب مع الخاصية ۴۴ HR‏ هو اسم هذا الملف 
لفرت از صل اه 


لنقم بإنشاء وصلة تشعبية تقودنا إلى الصفحة الرئيسية لهذا الموقع ولنفترض أن الملف الذي يحتويها اسمه index.htm‏ 
والشيفرة الخاصة بذلك هي: 


<A HREF="index.htmI">Main Page</A> 
Main Page 
وأذكرك بأنك تستطيع إدراج صورة هنا أيضا كعنوان للوصلة التشعبية وبنفس التفاصيل التي شرحتها في الحالة السابقة.‎ 
هيا ندرج صورة مصغرة كعنوان لوصلة تشعبية للصورة الأصلية.‎ 
<A HREF="nablus1.jpg"><IMG SRC="nablus_1.jpg" BORDER="0"></A> 


في هذا المثال قمت بتحديد الصورة المصغرة المسماه عمز.1_ءuاطاة"‏ كوصلة تشعبية تصلنا إلى الصورة الأصلية 
المسمol‏ gصnablus1.jp‏ 
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لكن إنتبه ا إذا كان الملف المطلوب والذي تريد الإشارة إليه موجودا في مجلد مختلف عن المجلد الذي يوجد به 
الملف الحالي» فيجب عليك تحديد المسار الكامل لهذا الملف وذلك بنفس الطريقة التي ناقشناها في الدرس السابق عندما 
قمنا يإدراج الصور. 


الحالة الثالثة هي أن نقوم بالإشارة إلى مكان آخر داخل نفس الصفحة» إلى أولها مثلاً أو إلى آخرها أو أي مكان آخر 
ذنریده... 

طبعا مهما بلغت درجة الذكاء والألمعية التي يتصف بها الكمبيوتر ومتصفح الإنترنت» فهما لا يستطيعان معرفة ما 
ترز كرك وال لا سه مره ان لر فى ف اف رااى هل ررك ادن حن 
الوصلة التشعبية. لذلك يجب أن تقوم أنت بتحدیده. 


هذه الحالة يتحتم عليك استخدام الخاصية التانية للوسم <4> وهي NAM#٤‏ 


لنقم معا بإدراج وصلة تشعبية تقوم بنقل الزائر من مكان وجود الوصلة إلى فقرة أخرى 
أول ما يجب فعله هو الذهاب إلى هذه الفقرة واختيار أول كلمة فيها ثم وضعها داخل الوسوم </A> ...<A>‏ 


<A>LINKS</A> 


والآن حان الوقت لاستخدام الخاصية N۸۷۴٤‏ فالخطوة الثانية هي تعريف هذه الكلمة بأي اسم نريده (المهم أن نبقى 
متذكرين له). سوف أقوم بإعطاء الاسم 101٣اج‏ 


<A NAME="attrib1">LINKS</A> 


لقد أصبحت هذه الفق رة جاه زة لكي نقوم باد راج وصلات تشعبية ايها من أي مكان في الملف» بل ومن أي ملف آخر 
... وأكثر من ذلك أنه لذا أراد أحد ما في أحد المواقع الأخ رى أن يضع وصلة تشعية لها من موقعه فان باستطاعته 
الخطوة الثالثة هي إدراج الوصلة التشعبية لهذه الفقرة. 
ويلزمنا هنا معرفة اسم الملف الذي توجد به هذه الفقرة (أي الملف الذي نعمل به) واسمه 11٤ط.0۲06اںط‏ لأنه سيشكل 
المدخل الأساسي للوصول إلى الفقرة المحددة. وتكون شيفرة الوصول إلى هذه الفقرة هي كالتالي: 

<A HREF="htutor06.html#attrib1">3rd Paragraph</A> 

3rd Paragraph 

لاحظ أننا لم نكتف بذكر اسم الفقرة لوحدها بل يجب أن تقرن باسم الملف الأب الذي يتضمنها من خلال إشارة # 


أما الحالة الأخيرة والتي نقوم فيها بإدراج وصلة تشعبية لعنوان بريد إلكتروني» يؤدي النقر عليها إلى إطلاق برنامج 
نزت اگنر وی لار تر كل ا فا شتت ارح ای یطرا ھا ھی کا کے ۸176 بعد خاس 
[RE۴‏ لكي تدل على أن العنوان الذي يلي هو عنوان ۳۷411 وليس أي عنوان آخر 


<A HREF="MAILTO:yahya@palnet.com"> Email Me </A> 


Email Me 
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والآن بعد أن انتهيت من سرد أساسيات استخدام الوصلات التشعبية وإدراجها في صفحات الويب بقي هناك بعض 
الترضيحات والملاحظات التي أجد أن من الهم ذكرها لك 

عندما قمنا بالتوصيل إلى عنوان خارجي» سواء كان لموقع ويب أو عنوان 11ة”.E‏ لاحظنا أننا استخدمنا كلمات مفتاحية 
ميزت طبيعة هذا العنوان» وأعطت المتصفح فكرة عن طبيعة التعامل مع هذا العنوان وطريقة الاتصال به. فعندما أردنا 
التشعب إلى موقع الويب كتبنا كلمة 1۲١۴‏ والتي تدل على نوع البروتوكول المستخدم في الاتصال بهذا الموقع» وهو 
بروتوكول نقل النصوص المتشعبة Hyper Text Transfer P00 c01‏ وعندما کتبنا عنوان ٤211‏ استخدمنا کلمة 
0 قبل هذا العنوان. وبالتالي قمنا بالإيعاز للمتصفح بفتح برنامج البريد الإلكتروني الافتراضي وتجهيزه 
لإرسال رسالة إلى العنوان المدرج. وحتما لقد صادفت مثل هذه الحالة كثيرا خلال تجولك في مواقع الويب. 


لكن هنا مجالات أخرى لاستخدام الإنترنت ولكل منها بروتوكوله الخاص. فمثلاً هناك الآلاف من المزودات المنتشرة 
غير الإنترنت و التي تحتوي على أعداد هائلة لا تحصى من الملفات زالبر امج الجاهزة للتحميل ويتم الوصرل إليها عبر 
بروتوکول خاص لنقل الملفات يدعی 1۲4"۴ )۴¡1e‏ ۴1۴ (t0co1دا۴.‏ ومن هذه المجالات أيضا والتي لا تقل أهمية 
عن الويب أو البريد الإلكتروني المجموعات الإخبارية 6۷S‏ مداه أو مجموعات النقاش التي تختص كل منها 
بمناقشة موضوع معين. وهذہ تعمل مj‏ خlڵJ‏ ڊرgتgكJg .Protocol) NNTP (Network News 11a nsfer‏ 


إن تعدد مجالات إستخدام الإنترنت وتعدد البروتوكولات فيها لا يعني أنك تحتاج لأن يكتظ 
سطح مكتبك بالعديد من البرامج للتعامل معها. فمعظم المتصفحات التي نستخدمها تحتوي على 
برامج خاصة تدعم هذه الخدمات. 

فمثلاً عند النقر على عنوان مزود ۴۲۴ يتم الدخول إليه مثله مثل أي موقع ويب عادي وتظهر 
قائمة المجلدات والملفات فيه بشكل مشابه للمستكشف فى وس0لم1س. أما النقر على عنوان 
إحدى المجموعات الإخبارية فيؤدي إلى سلوك مشابه للنقر على عناوين البريد الإلكتروني» أي 
إطلاق برنامج تصفح خاص بالمجموعات الإخبارية يكون مدمجا ضمن حزمة المتصفح ٠‏ 
الأصلى. 


والآن... أعتقد أنه ليس من الصعب عليك استنتاج الكيفية التي نضيف بها وصلات تشعبية لمزود ۴1۲. 
إليك هذا العنوان لأحد المزودات التي يحتوي على الكثير من البرامج المجانية أو المشتركة 


ftp://ftp.simtel.net/pub/simtelnet/win95/ 
وكل ما عليك فعله هو كتابة الشيفرة التالية:‎ 
<A HREF="ftp://ftp.simtel.net/pub/simtelnet/win95/">Simtel FTP Server</A> 
Simtel FTP Server 


أما بالنسبة للمجموعات الإخبارية فتكتب الوصلات التشعبية لها باستخدام الكلمة المفتاحية .N٤W8‏ فعلى سبيل المثالء 
لوضع وصلة تشعبية لمجموعة النقاش 11[.)[ه الخاصة بمناقشة لغة 111 نكتب الشيفرة التالية: 


<A HREF="news:alt.htmI">AlIt. HtmI</A> 
Alt.Html 
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الجداول (1) 


هذا الدرس سيكون الأول من درسين حول الجداول. وقد فضلت تجزئتها إلى قسمين وذلك لأهمية هذا الموضوع وتعدد 
خصائص الجداول واحتمالات استخدامها في صفحات الويب. 


تعد الجداول من آقوى الأدوات التي تتضمنها لغة ا11 وآكاد أجزم بأنه لا يوجد موقع في الإنترنت إلا ويستخدمها 
بصورة أو بأخرى. والحقيقة أن وضع الجداول في صفحات الويب لا يقتصر على تلك القوائم من البيانات التي نحتاج 
لترتيبها في صفوف وأعمدة» بل يتعدى ذلك إلى استخدامها في تصميم الصفحات نفسها وتنظيمهاء > والتحكم بمظهرها 
بصورة قوية وفعالة لا يمكن أداؤها مهما استخدمنا من وسوم خاصة بتنسيق الصفحات. 

إن التعامل مع الجداول وإدراجها في صفحات الويب سهل جدا متله مثل أي أداة من أدوات [1١1‏ لكنه قد يبدو لك 
مربكا بعض الشيء وخاصة في البدايةء وذلك لتعدد الخصائص التي تستعمل معها وتعدد الأوجه التي نستطيع التصرف 
بها. لکن لا تقلق فكل شيء يبدو صعباً في بدایته ولکن سرعان ما يصبح سهلاً. 


بدايةء إليك هذا الوصف البسيط للوسوم الأساسية الخاصة بالجداول 


ABLE>...</TABLE>‏ 1> | وسوم تعریف الجدول 


ab1e Row‏ 1 وسوم تعريف الصف في 


<TR>...</TR>‏ الول 


]ab1e ‰4‏ وسوم تعريف الخلايا في 
<TD> Cell Data </TD>‏ اله ر كرف مات ل اة 


هي الوسوم التي نبداً بها لإدراج جدول مكون من خلية واحدة أو من مليون خلية .. الأمر سيان 
</TABLE> ... <TABLE>‏ 


والآن بعد إدراج هذين الوسمين»ء هناك سؤالين ينبغي الإجابة عليهما. الأول: كم عدد الصفوف التي نريدها في الجدول؟ 
ثلاثةء أربعةء مائة؟ لا بأس» قم بإضافة الوسوم 


</TR> ... <TR> 


بنفس عدد الصفوف التي تريدها. ولنفترض هنا أنها ثلاثة. 


41 


ت تحميل هذا الكتاب من موقع كتب الحجاسب العربية"™Cb4a.cCO wwWW.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


<TABLE> 


<TR> 
</TR> 


<TR> 
</TR> 


<TR> 
</TR> 


</TABLE> 
والسؤال الثاني هوء كم عدد الخلايا (أو الأعمدة) التي نريدها في كل صف؟‎ 
</TD> ... <TD> 
طالما أن الخلايا هي جزء من‎ >/1R< ... >1< بنفس عدد الخلايا المطلوب. ومن البديهي أن نكتبها بين الوسوم‎ 
الصفوف. وهنا سافترض أننا نريد خليتين في كل صف» وبذلك یجب تكرار کتابتها مرتين لكل صف.‎ 
وأذكرك أن النص الذي نريد إدراجه في الخلية يكتب ضمن هذين الوسمين.‎ 
<TABLE> 
<TR> 


<TD> Data </TD> 
<TD> Data </TD> 


</TR> 
<TR> 


<TD> Data </TD> 
<TD> Data </TD> 


</TR> 
<TR> 


<TD> Data </TD> 
<TD> Data </TD> 


</TR> 


</TABLE> 
هل اتضحت لك الصورة الآن. أنظر إلى نتيجة العمل التي حصانا عليها.‎ 


Data Data 
Data Data 
Data Data 
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هناك شيءِ ما ينقص. بالطبع 2 الحدود. انتظر قليلاً وستعرف الخاصية التي تقوم باضافة الحدود للجدول وغيرها من 
لفان الأرئ ان فل ل اتر ان ات ها د اا ب ى الحو هى ل فة اا مه 


۰ مستوی الجدول ككل 
e‏ مستوى الصفوف ككل أو كل واحد على حده 
6 مستوى الخلايا ككل أو كل واحدة على حده. 


ولكل من هذه المستويات خصائصه التي ينفرد بها كما أن هناك خصائص مشتركة تستخدم مع كل الوسوم. 


نبداً بمناقشة الخصائص التي تستخدم مع الوسوم 81٤< ... >۲۸ 81٤<‏ ۲۸/> وساقوم أولا بسردھا لك› ومن ثم 
إدراج بعض الأمثلة التي توضحها. 


الإفتراضية لها هى صفر أي لا حدود 
BORDER‏ اا ف 


<TABLE BORDER="5"> 
<TABLE BORDER="(0"> 


نستخدم هذه الخاصية اتحديد عرض الجدول ككل. وهناك أسلوبين 
لتحديد العرض: المطلق أي بكتابة الرقم الذي يمثل العرض بصورة 
مباشرة. والنسبي أي كتابة رقم نسبي مئوي يحدد عرض الجدول 

WIDTH‏ حسب عرض نافذة المتصفح. (آي أن عرض الجدول سیختلف 
باختلاف عرض نافذة المتصفح). 


<TABLE WIDTH="600"> 
<TABLE WIDTH="80%"> 


لتحديد ارتفاع الجدول» ويكون تحديد هذا الإرتفاع من خلال قيمة 
مطلقة تحدد الإرتفاع بالبيكسل. أو قيمة نسبية تحدد ارتفاع الجدول 
HEIGHT‏ و ا 


<TABLE HEIGHT ="500"> 
<TABLE HEIGHT ="100%"> 


لتحديد المسافة بين كل خلية من خلايا الجدول 
CELLSPACING‏ 
<TABLE CELLSPACING="10">‏ 


لتحديد المسافة الفاصلة بين الحدود وبداية النص في كل خلية. ا 
6م م | تحديد حجم الهوامش لخلايا الجدول. 


<TABLE CELLPADDING="10"> 
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ت تحميل هذا الكتاب من موقع كتب الحاسب العربية wwWW. Cb4a. cO"‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


لتحديد محاذاة الجدول أفقيا على الصفحة يمينا أو يساراً. وهو يأخذ 


left ,right اليم‎ 
ALIGN 
<TABLE ALIGN="Left"> 
<TABLE ALIGN="Right"> 


ويستخدم لتحديد لون الخلفية للجدول 


BGCOLOR 
<TABLE BGCOLOR="#0OFFFF"> 


هذه هي الخصائص المستعملة مع الجدول. وسأقوم الآن بتطبيقها على المثال الوارد في بداية هذا الدرس وسأكتفي 
بكتابة وسم البداية أما باقي الوسوم فهي نفسها: 
<TABLE BORDER="5">‏ 


Data Data 
Data Data 
Data Data 


<TABLE BORDER="5" CELLPADDING="5"> 


<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10"> 


Data Data 
Data Data 
Data Data 


44 


ت تحميل هذا الكتاب من موقع كتب الحاسب العربية"™Cb4a.cO wwWW.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10" 
BGCOLOR="#FFFFOO"> 


<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10" 
BGCOLOR="#FFFFOO" HEIGHT ="300"> 


<TABLE BORDER="5" CELLPADDING="5" CELLSPACING="10" 
BGCOLOR="#FFFFOO" HEIGHT ="300" WIDTH="75%"> 


ونتكلم الآن عن الخصائص المستخدمة مع وسوم الصف <1> ... >/1R<‏ ولا بأس من تذكيرك أن عدد الصفوف 
في الجدول يتحدد بعدد هذه الوسوم. أما هم الخصائص التي تضاف لهذا الوسم فهي : 
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ت تحميل هذا الكتاب من موقع كتب الحجاسب العربية"™Cb4a.cCO wwWW.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


ALIGN 


لتحديد محاذاة النص أفقيا داخل الخلايا التي يتكون منها الصف» والقيم 
المحتملة لها هي امع Right, ef),‏ والقيمة الإفتراضية هي إع)م°C‏ 


لتحديد المحاذاة العمودية للنص داخل خلايا الصف» وذلك إما للأعلى أو 
VALIGN‏ للأسفل أو في المنتصف أو على امتداد الخط الأساسي للخلية. وقيمها على 
التوالي ھa: Baseline , Top, Bottom, Middle‏ 


BGCOLOR 


لتحديد لون الخلفية للخلايا التي يتكون منها الصف. وهنا يتم تجاهل لون 
الخلفية المحدد ضمن وسم ٤<‏ 1۸8> ويتم تطبيق اللون المحدد هنا. 


ونعود الآن إلى جدولنا السابق لنطبق عليه هذه الخصائص من خلال الأمثلة التالية: 


Data 
Data 
Data 


Data 
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<TABLE BORDER="5" HEIGHT ="300"> 
<TR ALIGN="Left"> 

<TD> Data </TD> 

<TD> Data </TD> 

</TR> 


<TR ALIGN="Right"> 
<TD> Data </TD> 
<TD> Data </TD> 
</TR> 


<TR ALIGN="Center"> 
<TD> Data </TD> 
<TD> Data </TD> 
</TR> 

</TABLE> 


Data 


<TABLE BORDER="5" HEIGHT ="300"> 
<TR VALIGN="Top"> 

<TD> Data </TD> 

<TD> Data </TD> 

</TR> 


<TR VALIGN="Bottom"> 
<TD> Data </TD> 

<TD> Data </TD> 
</TR> 


<TR VALIGN="Baseline"> 
<TD> Data </TD> 

<TD> Data </TD> 

</TR> 

</TABLE> 


تم تحميل هذا الكتاب من موقع كتب الحاسب العربية"CbD4a.cCO www.‏ 
للمزيد من الكتب في جميع مججالات الحاسوب تفضلو بزيارتنا 


Data Data 


<TABLE BORDER="5" HEIGHT="300" BGCOLOR="#FFFFFF"> 
<TR BGCOLOR="#808080"> 

<TD> Data </TD> 

<TD> Data </TD> 

</TR> 


<TR BGCOLOR="#COCOCO"> 
<TD> Data </TD> 

<TD> Data </TD> 

</TR> 


<TR> 

<TD> Data </TD> 
<TD> Data </TD> 
</TR> 

</TABLE> 


Data Data 


<TABLE BORDER="0" HEIGHT="100%" WIDTH="100%"> 
<TR BGCOLOR="#808080"> 

<TD> Data </TD> 

<TD> Data </TD> 

</TR> 


<TR BGCOLOR="#COCOCO"> 
<TD> Data </TD> 

<TD> Data </TD> 

</TR> 


<TR BGCOLOR="#FFFFFF"> 
<TD> Data </TD> 

<TD> Data </TD> 

</TR> 

</TABLE> 


ت تحميل هذا الكتاب من موقع كتب الحجاسب العربية"™Cb4a.cO wwWW.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


والآن ماذا بقي لدينا؟ بالطبع بقيت الوسوم الخاصة بالخلايا. وسوف أتابع الحديث عنها في الدرس القادم إن شاء الله. 
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ت تحميل هذا الكتاب من موقع كتب الحاسب العربية"™Cb4a.cO wwWW.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


الدرس الثامن 
الجداول (2) 
نتابع معا في هذا الدرس الحديث عن الجداول. وأنا أفترض أنك قد أنهيت الدرس السابق بنجاح» وأن لديك الآن فكرة 


جيدة جد عن الجداول وكيفية إنشائها والتعامل مع خصائصها ومع الصفوف وخصائصها. ونكمل الآن من حيث توقفناء 
آي مع خصائض الخاذيا. 


هل تذكر ما قلناه عن عدد الخلايا في الصف الواحد؟ إن عدد الخلايا المطلوب يتحدد من خلال كتابة الوسوم <1> 
... <1/> مرات بنفس العدد المطلوب. ومن الممكن أن تحتوي الخلية على أي عنصر من عناصر لغة HTML‏ : 
نصوص» رسوم» قوائم» وصلات تشعبية» بل وحتى جداول. (نعم» تستطيع إدراج جدول داخل جدول آخر) 


لنسترجع معا المثال الذي قمنا بالتدرب عليه في الدرس السابق» فسوف نكمل هذا الدرس معه. وهو جدول صغير مكون 
<TABLE>‏ 
<TR>‏ 


<TD> Data </TD> 
<TD> Data </TD> 


</TR> 
<TR> 


<TD> Data </TD> 
<TD> Data </TD> 


</TR> 
<TR> 


<TD> Data </TD> 
<TD> Data </TD> 


</TR> 


</TABLE> 


أما الخصائص المستخدمة مع الخلاياء فهذا جدول بها: 


تحدد محاذاة النص الموجود في الخلية أفقياًء والقيم المستخدمة هي ,ا1 


Center, Right N 


تحدد المحاذاة العمودية للنص» وهو يأخذ Top, Middle, Bottom, pall‏ 


Baseline VAN 
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ت تحميل هذا الكتاب من موقع كتب الجاسب العربية^/™Cb4a.cCO www.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


تس عر کن اة و كاك ك ا اقات ولي كن انعطا رى اك 
WIDTH‏ أو بكتابة رقم يمتل النسبة المئوية. ويكفي تحديد العرض للخلايا في أحد 
الصفوف لكي يتم تطبيقه على كل الخلايا في كل الصفوف. 


تحدد الإرتفاع المطلوب للخلية في الصف» وذلك بالطرق المباشرة أو النسبية. 
HEIGHT‏ وقيامك بتحديد ارتفاع إحدى الخلايا في الصف يؤدي إلى تطبيقه على كل 
الخلايا فيه. 


BGCOLOR‏ تحدد لون خلفية الخلية 


يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها أفقيا 
<TD COLSPAN="n"> COLSPAN‏ 


حيث ۾ هو عدد الخلايا التي سيتم دمجها 


يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها عموديا (أي 
أسفلها). 
<TD ROWSPAN="n"> ROWSPAN‏ 


وبالطبع م هو عدد الخلايا التي سيتم دمجها 


وقبل أن نستمر» يبدو لي أن هناك بعض الملاحظات المهمة التي ينبغي ذكرها: 


ه٠‏ كما تلاحظ هناك خصائص تتكرر مع جميع الوسوم. خذ مثلاً الخاصية .86€٨0010R‏ كيف يتم التعامل معها 
إذا كررت مع جميع الوسوم؟ بكل بساطة يتم تطبيق اللون المحدد مع وسم الخليةء فإذا لم يكن محدداً يطبق 
اللون المحدد مع وسم الصف» فإذا لم يوجد يطبق اللون المحدد مع وسم الجدول. وإذا لم يكن هذا محدداً بدوره 
يتم إعتماد لون خلفية الصفحة المحدد في الوسم <805۷>. 

٠‏ الملاحظة الثانية تتعلق بالخصائص 1٤161١‏ ,71(18. يختلف أسلوب التعامل مع هذه الخصائص من 
متصفح لآخر» بل وتختلف أيضا طريقة تفسير القيم المحددة معها وخصوصا فيما يتعلق بالنسب المئوية. (راجع 
الموضو ع: الوسوم الخاصة والمتصفحات ). 
وبدون الخوض في تفاصيل هذه الإختلافات التي لن تؤدي إلا إلى المزيد من الإشكالات لديك... وبعد التجربة 
يبدو أن أفضل طريقة للتعامل مع هذه الخصائص هي قيامك بتحديد العرض (وكذلك الإرتفاع إذا أردت ذلك) 
للجدول ككل من خلال الوسم .>1۸81٤<‏ تم استخدام هذه الخصائص في وسوم الخلايا وتحديد العرض 
المطلوب لكل خلية على حده في الصف الأول» والارتفاع المطلوب لكل صف في الجدول. 
وهذه برأيي أفضل طريقة تضمن بها أفضل مشاهدة للجدول لجميع زوار موقعك. 

ه٠‏ إذا أردت أن تحتوي بعض الصفوف في الجدول على عدد من الخلايا أقل من باقي الصفوف» فلا يكفي أن تقوم 
بحذف وسوم الخلايا منها. (كما ترى في الشيفرة التالية:) 


<TABLE BORDER="5"> 


<TR> 
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ت تحميل هذا الكتاب من موقع كتب الحاسب العربية wwWW. Cb4a. cO"‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


<TD> Data </TD> 


</TR> 
<TR> 
<TD> Data </TD> 
<TD> Data </TD> 
</TR> 
<TR> 
<TD> Data </TD> 
</TR> 
</TABLE> 


لأن هذا ما ستحصل عليه: 


Data 
Data Data 
Data 


لقد بقي مكان الخلايا المحذوفة محجوزا كما لو أنها لم تحذف. أما الخلايا الباقية فظلت محتفظة بنفس 
خصائصهاء أي أننا لم نستفد من عملية الحذف. والحقيقة أن الطريقة المثلى لذلك هي أن تقوم بمج الخلايا معا 
وذلك باستخدام الخصlئص .COLSPAN, ROWSPAN‏ 


إذن لنقم بإعادة كتابة شيفرة الجدول مع استخدام هذه الخصائص: 
<TABLE BORDER="5">‏ 
<TR>‏ 
<TD COLSPAN="2"> Data </TD>‏ 
</TR>‏ 
<TR>‏ 


<TD> Data </TD> 
<TD> Data </TD> 
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ت تحميل هذا الكتاب من موقع كتب الحجاسب العربية"™Cb4a.cO wwWW.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


</TR> 


<TR> 


<TD COLSPAN="2"> Data </TD> 


</TR> 
</TABLE> 
Data 
Data Data 
Data 


لاحظ أن العدد 2 هو عدد الخلايا التي قمنا بدمجها. ولاحظ أيضا انني لم أقم بإعادة وسوم الخلايا المحذوفة لأننا أصلا 
لا نحتاج لها بعد أن قمنا بالدمج. وكقاعدة أساسية: كل خلية يتم دمجها يجب بالمقابل حذف وسوم التعريف الخاصة 
بها. ما عدا تعريف الخلية الأساسية بالطبع. 
مثال آخر: لنقم بدمج الخلايا الموجودة في العمود الأول 
<TABLE BORDER="5">‏ 
<TR>‏ 


<TD ROWSPAN="3"> Data </TD> 
<TD> Data </TD> 


</TR> 

<TR> 

<TD> Data </TD> 
</TR> 

<TR> 

<TD> Data </TD> 
</TR> 

</TABLE> 

ومرة أخرى بعد تعريف خاصية الدمج العمودي» قمت بحذف تعريف الخلايا المدموجة من الصف الثاني والتالث. وهذا 


هو الجدول الناتج. 


Data Data 
Data 
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ت تحميل هذا الكتاب من موقع كتب الحاسب العربية"™Cb4a.cO wwWW.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


Data 


هناك نوع خاص من الخلايا التي يتم تعريفها باستخدام الوسوم <1> ... <83 1/< وهي |ختآصlر Table Header‏ 
أي ترويسة الجدول. 

والفرق الوحيد بينها وبين <1> ... <12/> هو أن النص الذي تحتويه يظهر بخط أسود عريض ومحاذاته في 
منتصف الخلية بصورة إفتراضية. (ليس بالشيء المهم» كما أعتقد)» خاصة وأن الخصائص المستخدمة معها هي نفس 
خصائص <1> وبنفس التفاصيل التي ذكرت. 


الس الأخيرة الستخدة فى الجدرل هى 46۸81105 ۲11086 0A۸‏ ر هی تخت باضافة غوران رف 
للجدول ككل. لذلك فهي عندما تكتب يتم وضعها مباشرة بعد الوسم >148[٤<‏ وبصورة مستقلة وليس ضمن وسوم 
لشت ر 


<TABLE BORDER="5"> 
<CAPTION> Table Caption </CAPTION> 


<TR> 


<TD> Data </TD> 
<TD> Data </TD> 


</TR> 
<TR> 


<TD> Data </TD> 
<TD> Data </TD> 


</TR> 
<TR> 


<TD> Data </TD> 
<TD> Data </TD> 


</TR> 

</TABLE> 
Table Caption 
Data Data 
Data Data 
Data Data 
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ت تحميل هذا الكتاب من موقع كتب الحجاسب العربية"™Cb4a.cO wwWW.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


وأخيرآاً... وصانا إلى نهاية هذه الدرس. وما بقي لدي هو أن أحتك على تطبيق ما قمت بشرحه فيه وفي الدرس 
السابق وباقي الدروس› وتجربة جميع الاحتمالات الواردة للأخصائص والقيم. إليك عدة طرق وأمثلة تطبيقية لاستخدام 
الجداول. 
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تم تحميل هذا الكتاب من موقع كتب الحاسب العربية"Cb4a.cCO www.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


أمثلة تطبيقية 


م 44 


على الجداول 


<TABLE WIDTH="80%" BORDER=10 BGCOLOR="#COCOCO"> 
<TR> 
<TD> ... </TD> 
</TR> 
</TABLE> 


<TABLE WIDTH="80%" BGCOLOR="#COCOCO"> 
<TR> 
<TD HEIGHT="200"> ... </TD> 
</TR> 
</TABLE> 


<TABLE BORDER="10"> 
<TR> 
<TD><IMG SRC="image.jpg"></TD> 
</TR> 
</TABLE> 


ت تحميل هذا الكتاب من موقع كتب الجاسب العربية^/™Cb4a.cO www.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


Nablus a High 


<TABLE CELLPADDING="5" CELLSPACING="5" WIDTH="50%" BORDER="3" BGCOLOR="#FFFFOO"> 
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.</TD> 
.</TD> 
.</TD> 


.</TD> 
.</TD> 
.</TD> 


.</TD> 
.</TD> 
.</TD> 


.</TD> 
.</TD> 
.</TD> 


<TR> 


<TD>=.. 
<TD>=.. 
<TD>=.. 


</TR> 
<TR> 


<TD>.. 
<TD>.. 
<TD>.. 


</TR> 
<TR> 


<TD>=.. 
<TD>.. 
<TD>.. 


</TR> 
<TR> 


<TD>=.. 
<TD>.. 
<TD>=.. 


</TR> 
</TABLE> 


ت تحميل هنك االتكتااب هن موقع كتب الحجاسب العربية wwWW. Cb4a. cO"‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


<TABLE CELLPADDING=0O CELLSPACING=0O WIDTH="100%" HEIGHT ="100%" BORDER=0> 
<TR> 
<TD WIDTH="33%" ROWSPAN=3 BGCOLOR="#FF8OCO0">...</TD> 
<TD BGCOLOR="#ffCCFF">...</TD> 
</TR> 
<TR> 
<TD BGCOLOR="#ff99FF">...</TD> 
</TR> 
<TR> 
<TD BGCOLOR="#ff9999">...</TD> 
<ITR> 
<TR> 
<TD ROWSPAN="3" BGCOLOR="#FFFFOO">...</TD> 
<TD BGCOLOR="#ffff66">...</TD> 
</TR> 
<TR> 
<TD BGCOLOR="#ffff99">...</T D> 
</TR> 
<TR> 
<TD BGCOLOR="#ffffcC">...</T D> 
</TR> 
<TR> 
<TD ROWSPAN="3" BGCOLOR="#FF8000">...</TD> 
<TD BGCOLOR="#ff9933">...</TD> 
</TR> 
<TR> 
<TD BGCOLOR="#ff9966">...</TD> 
</TR> 
<TR> 
<TD BGCOLOR="#ff9999">...</TD> 
</TR> 
</TABLE> 


dt View Favorites Tools Hel 
O MAO Pn rs © 23-ê B8 ° 3 3 


#8 Ftp: feet .khayma ,corjhpinar abic examples table 1, html أ‎ 2 Go 


<TABLE WIDTH="100%" BGCOLOR="#FFFFFF" BORDER=0 height="2000"> 
<TR> 
<TD WIDTH="25%" BGCOLOR="#000080">...</TD> 
<TD WIDTH="50%">...</TD> 
<TD WIDTH="25%" BGCOLOR="#000080">...</TD> 
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تم تحميل هذا 
للمزيد من 


الكتاب من موقع كتب الحجاسب العربية"™Cb4a.cO wwWW.‏ 
الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


</TR> 
</TABLE> 


Edt Wiew Favortes Tools Hep 


9-BO Pe Frew © 2-B 8-J Y3 


55 8 http: fw. khayna. comyhpinar abicexamplesftablez. html آ‎ EJ 5 Norton AntiVirus 5 


@ Internet 


3ّ 
8 


<TABLE WIDTH="100%" BORDER=0 CELLSPACING=0> 
<TR> 
<TD COLSPAN=3 BGCOLOR="#OOFFFF" HEIGHT ="100">...</TD> 
</TR> 
<TR> 
<TD BGCOLOR="#O0OFFOO" HEIGHT="2000">...</TD> 
<TD BGCOLOR="#FFFFFF">...</TD> 
<TD BGCOLOR="#O0OFFOO">...</TD> 
</TR> 
</TABLE> 


Edt Yew Favorites Too Hep 


3 BD 2 ۵ ر‎ se E Fortes @ A 3 : سا‎ e 4 


es €] hitosflvow,khayma.comihpinarabiefexamplesftsble3. htd vl Eso Norton antvrus 


a 


me 3 @ Internet 
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ت تحميل هذا الكتاب من موقع كتب الحجاسب العربية"™Cb4a.cO wwWW.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


Norton Antivirus | 


<TABLE CELLPADDING=0 CELLSPACING=0 WIDTH="100%" BORDER=0> 
<TR> 
<TD WIDTH="25%" ROWSPAN=2 BGCOLOR="#008000">...</TD> 
<TD BGCOLOR="#808000" HEIGHT ="100">...</TD> 
<TD WIDTH="25%" ROWSPAN=2 BGCOLOR="#008000">...</TD> 
</TR> 
<TR> 
<TD HEIGHT ="2000">...</T D> 
</TR> 
</TABLE> 


Ed êw Favortes Tools Help 


OR AO Pe kms © 8-B S8 ® dB 


i (Î Mtp:jfrwmw Mhayia,comfhoinarabicexamplesftable4 hinl Es 
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ت تحميل هذا الكتاب من موقع كتب الحجاسب العربية"™Cb4a.cO wwWW.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


الدرس التاسع 
الإطارات )1( 


تاستخداسهاء:: 


فهل تعرف ما هى الإطارات؟ حسناء سأوضحها لك... هل سبق لك وأن زرت إحدى الصفحات لتشاهد أنها مقسمة إلى 

عدة أقسام بحيث يظهر في كل منها صفحة مستقلةء وتبدو بصورة منفصلة عن الأقسام الأخرى. وربما تكون قد قمت 
بالنقر على إحدى الوصلات التشعبية الموجودة في أحد الأقسام لتظهر الصفحة المتعلقة بها في القسم الآخر. 

إذا كنت قد شاهدت مثل هذه الصفحات فهذا يعني أن الإطارات مألوفة لديك وإلا فشاهد مثالا على صفحة ذات إطارات 


A Master File - MICTOSON IntETAET EXPIOTEF 


کا ر 
Fle Ed Yew Favorkes fod Help 0#‏ 


3 اا E ê 2 Sêarth ê Favorites La 2 r”‏ 5 3 ا 


Ades: Î] Htpillww khaymacomfhpinarabicfexamplesmaster html ا‎ EIGo Uk * 


Frame 1 


Frarê 2ã Fraime 3 


ne O Memet 

كما تشاهد» فإن الصفحة مكونة من ثلاثة أقسام: علوي وأيسر وأيمن... والحقيقة أن كل قسم منها هو عبارة عن ملف 
81 كامل ومستقل بحد ذاته. وهي مجرد صفحات عادية لا تختلف أبداً عن تلك التي تعلمت إنشاءها في الدروس 
ا و ع کل ا لات اخ عن حك ال کو اتو بف 

أما كيف تم جمعها معا لتظهر بالشكل الذي تشاهده؟ فهنا بيت القصيد. فبالإضافة إلى الصفحات والملفات الإعتيادية 
برخ دانما ملف اماس بت شار خصصا لري صق الإطارات وتجيها و تخي خصاتصهاء أي أن المحالة 
تتلاخص بِ: 


مكونات صفحة الإطارات = عدد ملفات الصفحة نفسها + صفحة الملف الأساسي الذي يجمعها. 


أي أنني في المثال السابق إحتجت فعليا إلى أربعة ملفات لتكوين الصفحة. 
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ت تحميل هذا الكتاب من موقع كتب الجاسب العربيةCb4a.cCO™/^N www.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


وقبل أن نبداً. .. لنقم بالتحضير للأمثلة التي سترد في هذا الدرس. لذلك قم بإنشاء ثلاثة أو أربعة ملفات بسيطة لكي 
تستخدمها في تطبيق الأمثلة أو استخدم ملفاتك القديمة التي قمت بالتدرب عليها في الدروس السابقة. أنا قمت بإنشاء 
ملفات على النمط التالي (وهي التي استخدمتها في المثال) و frame1.html, frame2.html, frame3.htn1 liai‏ 


<HTML> 

<HEAD> 
<TITLE>Frame1</TITLE> 
</HEAD> 

<BODY> 

Frame 1 

</BODY> 

</HTML> 


ونبد الآن بتعريف الملف الرئيسي الذي سيضم كافة الإطارات والملفات. وهو بالمناسبة ملف ذو حالة خاصة حيث نقوم 
ا اوو 
<FRAMESET> ... </FRAMESET>‏ 
بدلا مj‏ الوم </BODY> ... <>BODY¥>‏ 
((إذن الملف الرئيسي للإطارات لا يتضمن تعريفا باستخدام 805¥ )) 
<HTML>‏ 
<HEAD>‏ 
<TITLE>Master File</TITLE>‏ 
</HEAD>‏ 


<FRAMESET> 
</FRAMESET> 


</HTML> 
وهي تعرّف عدد وأحجام‎ 0018S نأتي الآن إلى الخصائص: والخاصية الأولى التي تستخدم مع هذه الوسوم هي‎ 


الإطارات العمودية للصفحة. وتحدد الأحجام بطريقتين (هل عرفتهما؟) نعم... إنهما الطريقة المباشرة والطريقة 
النسبية... أو كلاهما معا. 


والاآن إليك هذه الأمثلة التي توضح الأعمدة.. 


أن يودي إلى أي نتيجة ولا إلى ظهور اي إطار ات حيیث بنقصها وسوم أخرى خاصة بمصدر الملفات الظاهرة داخل 


<FRAMESET 


E 1 COLS="50%,50%"> 
يحدد إطارين عموديين حجم كل منهما %50 من حجم الشاشة‎ >R ASE > ` 


٠ ۳ <FRAMESET 
یحدد ثلاثة إطارات أحجامها %20 و %50 و %30 علی‎ | C0L15="20%,50%,30%"< 


۴5۴1 يحدد ثلاثة إطارات عمودية الأول حجمه 200 بيكسل» 
Hj | COLS="200,300,">‏ 
>/RAMESÉT<>‏ والثاني 300 بیكسل› 
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ت تحميل هذا الكتاب من موقع كتب الجاسب العربية"™Cb4a.coO www.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


أما الثالث * أي انه غير محدد بحجم معین ولکنه سیکون 
بالحجم المتبقي من الشاشة (طالما أننا لا نعرف استبانة الشاشة 
التي يستخدمها زائر الموقع) 
R۴ AMESET‏ يحدد أربعة إطارات حجم الأول هو 200 بيكسل» والثالث 
15 فن سخ الا والرايم 90 فن خم الل أا 
الثاني فسيكون حجمه بما تبقى من الشاشة. 
٣ . 1 e <FRAMESET‏ 
COLS="150,*,2*">‏ يحدد نلانثة إطارات الاول حجمه 150 بیکسل.... ما المساحة 
ESE1<‏ ۴۴> المتبقية فتقسم على أساس أن الإطار الثالث حجمه هو ضعفي 
(*2) حجم الإطار الثاني (*) 


أما الخاصية الثانية فهي ۸0WS‏ وأعتقد أنك استنجت طبيعة عملها. نعم هي تحدد عدد وحجم الإطارات الأفقية 
(الصفوف) داخل الصفحة. وذلك بنفس الأسلوب المتبع مع الأعمدة إما باستخدام الطريقة النسبية أو المطلقة. 
وسأقوم بسرد بعض الأمثلة لتوضيحها (وأذكرك تانية أن هذه الأمثلة غير مكتملة): 


<FRAMESET 
e 4 ROWS="50%,50%"> 
من ارتفاع الشاشة‎ 0٩450 يحدد إطارين ن أفقيين ارتفاع کل منهما‎ </IERAMESET> 


<FRAMESET 
%30 يحدد ثلاثة إطارات أفقية ارتفاعاتها %20 و %50 و‎ R0۷ 8="20%,50%,30%"< 


</FRAMESET>‏ لئ التوالي من ارتفاع الشاشة 


<FRAMESET 
بیکسلء وي‎ 50 e يحدد ثلاثة أفقية الأول‎ |۸0۷ 8="50,120,*"< 


۴۴۳ يحدد أربعة إطارات أفقية ارتفاع الأول هو 50 بيكسل» والثالث 
ROWS="50,*,15%,20%">‏ %15 ارتفاع الشاشة»ء والرابع %20 من ار تفاع الشاشة أما 
>/FRAMESÉT>‏ 15 من ارتفاع e‏ 
الثاني فسيكون ارتفاعه بما تبقى من ارتفاع الشاشة. 
<FRAMESET COLS="*,2*">‏ 
ES۴<‏ ۴۴> يحدد إطارين الثاني ارتفاعه ضعفي ارتفاع الأول 


نه بس من ك كل الععاتعن اة بال 91 36 ال هاف اقفر ر تكن من الخررري لن 
نقوم الآن بالإنتقال إلى وسم آخر للإطارات لأنه مرتبط إرتباطا وثيقا بالوسوم السابقة وخصائصها المذكورة أعلام 
وهي >۴۲۸RA۸ MN ٤<‏ فما هو عمل هذا الوسم؟ 


حسناء كل ما قمنا به حتى الآن هو تعريف مجموعة من الإطارات وخصائصها (فقط تعريف الإطارات) لكن لم نحدد 
ماهية هذه الإطارات ولا محتوياتها ولا مصادرها. تماما كما نقوم بتعريف صفحات الويب الإعتيادية وخصائصها في 
الوسم <۷ 805> دون أن يعني ذلك تحديد محتويات هذه الصفحات. فإذا أردنا فيما بعد إدراج صورة مثلاً نستخدم 
الوسم الخاص بذلك وهر <Xع.SRC="14g1212€ <"IMG‏ 


وفي حالة الإطارات فإننا نستخدم الوسم MN ۳٤<‏ ۸ ۴۸> وهو وسم مفرد أي ليس له وسم نهاية تماما مثل .>1M6<‏ 
وفیه نقوم بتحدید مصدر وخصائص كل ملف نريد إظهاره داخل أحد الإطارات. ويتم استخدام هذا الوسم مرات بنفس 
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ت تحميل هذا الكتاب من موقع كتب الجاسب العربيةCb4a.cOoO™/^N www.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


عدد الإطارات المذكورة داخل .<FRAMESETI®>‏ وسوقف أقوم مباشرة باستخدام الخاصية SRC‏ أتحديد مصدر 
الملف. 


دعنا نقوم الآن بإتمام الشيفرة لبعض الأمتلة المذكورة أعلاه. ونبداً بالمثال الأول: 


<FRAMESET COLS="50%,50%"> 
<FRAME SRC="frame1.html"> 
<FRAME SRC="frame2.html"> 
</FRAMESET> 


مثال آخر: 


<FRAMESET COLS="200,400,*"> 
<FRAME SRC="frame1.html"> 
<FRAME SRC="frame2.html"> 
<FRAME SRC="frame3.html"> 
</FRAMESET> 


مثال ثالث : 


<FRAMESET ROWS="50,*,15%,20%"> 
<FRAME SRC="frame1.html"> 
<FRAME SRC="frame2.html"> 
<FRAME SRC="frame3.html"> 
<FRAME SRC="frame4.html"> 
</FRAMESET> 


ورابع: 


<FRAMESET COLS="*,2*"> 
<FRAME SRC="frame1.html"> 
<FRAME SRC="frame2.html"> 
</FRAMESET> 


وبالإضافة إلى ما ذكر» نستطيع إدراج صورة مباشرة داخل الإطار وباستخدام <0 AM٤ SR‏ ۴۸> تماما كما ندرجها 
باستخدام <1۷6 ٣‏ 58> وإليك هذا المثال: 


<FRAMESET COLS="50%,50%"> 
<FRAME SRC="frame1.html"> 
<FRAME SRC="thedome.jpg"> 
</FRAMESET> 


والآن لماذا لا نقم معا بمراجعة الأفكار الأساسية السابقة الذكر وتلخيصها؟ وهذه هي:- 


لإدراج صفحة إطارات نحتاج إلى ملف رئيسي يعتبر بمثابة الوعاء الذي سيضم هذه 
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ت تحميل هذا الكتاب من موقع كتب الجاسب العربية^™wwwW.Cb4a.cCO‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


الإطارات. 

ه٠‏ الملف الرئيسي هو ملف ۲۷1[ إعتيادي غير ننا نكتب لوصوم <FRAMESET1>‏ 
>/#RAMESET>...‏ بدلا من <۷ 80> .>80D¥/<...‏ وبالتالي فهو يحتوي 
على الخصائص التي نريدها للإطارات وتعريفاتها. 

ه٠‏ نستخدم الخصائص ۸0۷8S‏ ,0018 لتحديد عدد الإطارات (صفوفا كانت أو أعمدة) 
واحجامها. 

ه٠‏ الملفات الفرعية التي تظهر ضمن الإطارات هي ملفات عادية كالتي قمنا بإنشائها في 
الدروس السابقة أو صورا. ولا تحتوي على أي تنسيق أو وسوم خاصة. 

٠‏ نستخدم الوسم ۸۷٤<‏ ۴۸> داخل الملف الرئيسي لمناداة الملفات الفرعية داخل 
الإطارات» وذلك مع الخاصية ٣‏ 59۸. بالإضافة إلى استخدامه لتحديد باقي الخصائص . 


كما نستطيع تمثيل هيكلية الإطارات من خلال الشكل التالي: 


فا زئيسي 
Master Fils‏ 
FRAMES ET‏ 


ا 
nî‏ 
1 


< FRAMES ET 


هل تأكدت من فهمك لهذه النقاط؟ لنتابع إذن ... 
حتى الآن قمنا بتقسيم الصفحة إما لإطارات أفقية أو لإطارات عمودية. لكن نحتاج لمعرفة كيفية إدراج كلاهما في 
الصفحة. كما في الأمثلة التالية: 


e‏ صفحة مكونة من صفين» الثاني منهما مقسم بدوره إلى عمودین 
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ت تحميل هذا الكتاب من موقع كتب الحاسب العربية"™Cb4a.cCO wwWW.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


A Master Filê Microsolt Internet EXOIOTEF 


Fle Ed Yew Favorktes Toil Help 


0. 0. B BO me fm © `ã B~ 
Address ھ1‎ hitpiffwwve, khayma,catnjfhpinar abicfexarnplesfmaster html 


Frame 1 


Frarmé 2 Frarne 3 


€] Done 


2 Urknowr Zore 


صفحة مكونة من عمودين› الثاني منهما مقسم بدوره إلى صفين 


2 Master Hile - Microsolt Internet xp loreFr 


file E ew Favorktes Toals Help 


e 
O O: SB AG Osn Yrens © 3- & 2 ا‎ 


Address ك‎ http: flower, khayma, comfhpinar abicfexarmplesfmasterc. html 


Frame 1 Frame 2 


Frame 3 


# Opening page htpiffrmew.forexers.cormfForexers.php... 


بما أن الصفحة تحتوي على صفين نقوم بتعريفهما أولا حسب الإرتفاعات المرغوب بها: 
<FRAMESET ROWS="100,*">‏ 
<FRAME SRC="frame1.html">‏ 


<FRAME SRC="frame2.html"> 
</FRAMESET> 


لكن الصف الثاني مقسم إلى عمودين وهنا يعتبر بمفهوم لغة ا1۲ وكأنه صفحة إطارات جديدة لذلك لا نحتاج 
لتعريفه كصف وبدلا من ذلك نعاود استخدام تعريف الصفحات! أي M٤ ؟S ٤1<‏ ۴۸۸> مرة أخرى. 
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ت تحميل هذا الكتاب من موقع كتب الجحاسب العربيةCb4a.coNn www.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


<FRAMESET ROWS="100,*"> 
<FRAME SRC="frame1.html"> 


<FRAMESET> 
</I/FRAMESET> 


</FRAMESET> 


وبما أن الصف الثاني (أو لنقل الإطار الثاني) مقسم إلى عمودين» إذن بقي علينا إضافة تعريف لهذه الأعمدة. وبذلك 
تكون الشيفرة النهائية كالتالي: 


<FRAMESET ROWS="100,*"> 
<FRAME SRC="frame1.html"> 


<FRAMESET COLS="200,*"> 
<FRAME SRC="frame2.html"> 
<FRAME SRC="frame3.html"> 
</FRAMESET> 


</FRAMESET> 


اة الحاصة نان اة فيد هي 


<FRAMESET COLS="100,*"> 
<FRAME SRC="frame1.html"> 


<FRAMESET ROWS="200,*"> 
<FRAME SRC="frame2.html"> 
<FRAME SRC="frame3.html"> 
</FRAMESET> 


</FRAMESET> 


لنقم الآن بإدراج مثال آخر وتحليله: 
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ت تحميل هذا الكتاب من موقع كتب الحاسب العربية wwW. Cb4a. cO"‏ 
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3 Untitled - Microsoft Internet Explorer 2 
file Ed ew Favorkes Tools Help 
9: Bd B Û Osea rms © &-ğ BÛ 
Adtess FE] Hip: khayna,comfhpinarabicjexamplesjmasterc2 Html 5 | EIGo uke» 
Frame 1 Frame 3 Frarae 3 
Frame 4 
Glick here bo begin [1 1 a Lrknowni Zonê 


يوجد لدينا ثلاثة أعمدةء اليس كذلك؟ إذن لنقم بتعريف صفحة إطارات ذات ثلاثة أعمدة (طبعاً لا يوجد أهمية للأحجام 
المذكورة» فأنا اخترتها حسب رغبتي وتستطيع أنت اختيار الأحجام التي تريدها). 


<FRAMESET COLS="100,*,100"> 
<FRAME SRC="frame1.html"> 
<FRAME SRC="frame2.html"> 
<FRAME SRC="frame3.html"> 
</FRAMESET> 


العمود الأوسط من هذه الصفحة مقسم إلى صفين» إذن نستبدل تعريفه بتعريف آخر لصفحة إطارات مكونة من صفين 
(وهذا هو التعريف بصورة مستقلة) 


<FRAMESET ROWS="80,*"> 
<FRAME SRC="frame2.html"> 
<FRAME SRC="frame4.html"> 
</FRAMESET> 


وبعد دمج الشيفرتين السابقتين معا نحصل على هذه الشيفرة النهائية: 


<FRAMESET COLS="100,*,100"> 
<FRAME SRC="frame1.html"> 


<FRAMESET ROWS="80,*"> 
<FRAME SRC="frame2.html"> 
<FRAME SRC="frame4.html"> 
</FRAMESET> 


<FRAME SRC="frame3.html"> 
</FRAMESET> 


وصلنا الآن إلى نهاية وقد قمنا في هذا الدرس بمناقشة أساسيات إدراج الإطارات» ولكن بقى هناك الكثير ليقال في هذا 
المجال. وهو ما سنكمله في الدرسين القادمين 
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ت تحميل هذا الكتاب من موقع كتب الجاسب العربية^™Cb4a.cO www.‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


الرس العاشر 
الإطار ات )2( 


لا زلنا نناقش موضوع الإطارات . لقد تعرفت في الدرس السابق على الأساسيات في هذا الموضوع» وتعلمت كيفية 
إنشاء صفحة ويب باستخدام مبدأ الإطارات. ونتابع معا التعرف على باقي الخصائص والتحديدات المتعلقة بها. 


بدايةء أجد من الضروري أن أذكرك بالوسمين الأساسيين للإطارات واللذين ندرجهما في الملف الأساسي» وهما 
>۴R۴AMESE1>‏ والذي يوضع بدلا من <۷ 802> ويشكل الوسم الأساسي لتحديد مجموعة الإطارات في الصفحة 
وخصائص هذه المجموعة ككل. و ۷٤<‏ ۴۸4۸> الذي يوضع داخل نطاق الوسم السابق ويعرف الملف المصدر لكل 
إطار ويحدد خصائصه. ومن المهم جداأ أن نميز بين الخصائص المتعلقة بكل وسم وأن لا نخلط بينهما. 


وعند الحديث عن الإطارات سوف نواجه تلك المشكلة العتيدة التي تؤرق دائما مصممي صفحات الويب» ألا وهي مسألة 


فمثلاً لدينا ربع خصائص للوسم <۴1 >۴۸R۸M ٤S‏ » لكن واحدة منها فقط تعمل مع كلا المتصفحين الرئيسيين 
.Netscape, MS Explorer‏ وكما إعتدنا سوف لن أركز على هذه الخصائص » لكن على الأقل سأكتفي بذكرها وذكر 
عملها وأترك لك حرية تجربتها إن أردت. 


أولى هذه الخصائص هي FRAMEBORDER‏ وهي تقوم بتحدید ظهور أو عدم ظهور الحدود حول الإطارات وتأخذ 
<FRAMESET ROWS="50,*,15%,20%" FRAMEBORDER="0">‏ 

<FRAME SRC="frame1.html"> 

<FRAME SRC="frame2.html"> 

<FRAME SRC="frame3.html"> 


<FRAME SRC="frame4.html"> 
</FRAMESET> 


أما الخصائص التلاث الأخرى فهي: 
:80RDER °‏ تحدد سمك الحدود الظاهرة حول الإطارات وهي تأخذ قیما بالبیکسل. )80۸0٤۴۸="""(‏ وتعمل 
قط Jڙۃgع Netscape‏ 
:!BORDERCOLOR‏ لإضافة لون للحدود ("bbوو60RDERC°01|0F="r)‏ وتعمل مع Netscape‏ أیضا. 
:۴RAMESPACING °‏ اتحديد مسافات فارغة إضافية حول الإطارات وتأخذ قيماً بالبيكسل 
(FRAMESPACING="n")‏ و„ تعJa .MS Explorer za‏ 


أما الخصائص المستخدمة مع الوسم ۸۷٤<‏ ۴۸> فهي كالتالي: 
:MARGINHEIGHT °‏ تحدد مقدار المسافة الفارغة المتروكة للهوامش العلوية والسفلية للإطار (بالبيكسل). 


MARGINHEIGHT="n" 
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:MARGINWIDTH °‏ تحدد مقدار المسافة الفارغة المتروكة للهوامش اليمنى واليسرى للإطار (بالبيكسل). 
MARGINWIDTH="n"‏ 


٠‏ N6[اا5CR0:‏ تحدد إمكانية ظهور أو عدم ظهور أشرطة التصفح الأفقية والعمودية على جوانب أو أسفل 
الإطار. وتأخذ القيم ئ للظهور . 0 لعدم الظهور. و auto‏ التي تحدد ظهور الأشرطة أو عدمه تلقائياً بحسب 
الحاجة إليها. تماما كما يحدث في معظم تطبيقات sس0لم۷1‏ 


SCROLLING="yes" 
SCROLLING="no" 
SCROLLING="auto" 


NORESIZEÊ °‏ عند إضافة هذه الخاصية يتم منع عملية التحكم بحجم الإطار بالتصغير أو التكبير من خلال 
السحب والإفلات. وهي لا تأخذ أي قيم. 


ولتوضيح مبدأً عمل هذه الخصائص إليك هذه الأمثلةء (سأقوم باستخدام الملف الرئيسي الذي أدرجت فيه الصورة في 
الدرس السابق» فهو أفضل مثال لتوضيحها). وقم بتفحصه والتدقيق في تفاصيله لكي تقارنها بما سينتج عن الأمثلة 
التاليةء كذلك حاول القيام بتكبير الإطار أو تصغيره بوضع المؤشر على الحد ثم استخدام السحب والإفلات بالإتجاه 


<FRAMESET COLS="50%,50%"> 

<FRAME SRC="thedome.jpg" MARGINHEIGHT="40"> 
<FRAME SRC="frame2.html"> 

</FRAMESET> 


<FRAMESET COLS="50%,50%"> 

<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30"> 
<FRAME SRC="frame2.html"> 

</FRAMESET> 


<FRAMESET COLS="50%,50%"> 

<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30" SCROLLING="yes"> 
<FRAME SRC="frame2.html"> 

</FRAMESET> 


<FRAMESET COLS="50%,50%"> 

<FRAME SRC="thedome.jpg" MARGINHEIGHT="40" MARGINWIDTH="30" SCROLLING="yes" NORESIZE> 
<FRAME SRC="frame2.html"> 

</FRAMESET> 
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كذلك ناك llخصlئص FRAMEBORDER, FRAMESPACING, BORDER, BORDERCOLOR‏ llتy‏ 
تستخدم مع هذا الوسم وبنفس التفاصيل التي ذکرت مع <1 ۷M ٤8S٤‏ ۴۸۸>. لكنها بالطبع تحدد خصائص الإطار وحده 
وليس مجموغة الإطارات ككل في الصفحة. وهي تعمل على متصفحات معينة دون غيرها. 


قى ا الخ 26 راق فر آم خا ا ارس ق الت تكد طر هة تشوق الل بن الإطارات 
والصفحات وأسلوب عرضها لذلك فقد فضلت أن أفرد لها موضوعا خاصا وبصورة مستقلة عن باقي الخصائص› وذلك 
في الدرس التالي إن شاء الله. 


هناك وسم ثالث يتعلق بالإطارات» ويتم إدراجه داخل الملف الرئيسي وعادة في النهاية وهو: 
<NOFRAMES> ... </NOFRAMES>‏ 


يستخدم هذا الوسم لتوفير بديل معين عن صفحة الإطارات في حالة قيام أحد الزوار بدخول الموقع مستخدما متصفحا لا 
يدعم الإطارات. (بالمناسبة فإن هناك متصفحات لا يمكن لها أن تعرض الإطارات مثل الإصدارات القديمة لِ 
Netscape, MS Explorer‏ لكنك حتما تستطيع مشاهدتها وذلك لأن الإصدارات المعربة من هذه المتصفحات هي 
إصدارات حديثة نسبيا وتدعم الإطارات. 


فإذا أردت أن تمنح زوار موقعك الذين لا يستخدمون متصفحا حديثا فرصة مشاهدة موقعك» فكل ما عليك فعله هو 
إراج هذا الوسم في نهاية الملف الرتيسى للإطارات والبدء بكتابة صفحتك كما لو كانت صفحة ويب عادية. 


<HTML> 
<HEAD> 
<TITLE>Main File</TITLE> 
</HEAD> 
<FRAMESET ROWS="50,*,15%,20%" FRAMEBORDER="0"> 
<FRAME SRC="frame1.html"> 
<FRAME SRC="frame2.html"> 
<FRAME SRC="frame3.html"> 
<FRAME SRC="frame4.html"> 


</IFRAMESET> 

<NOFRAMES> 

<BODY> 
أكتب ۰ اک‎ 

بالصورة 

الإعتيادية هنا 

</BODY> 

<INOFRAMES> 

</HTML> 


أما إذا كنت مصراً على إطاراتك ولا تريد إنشاء نسخة أخرى للموقع بدونهاء فلم لا تكتب ملاحظة بسيطة ضمن هذا 
الوسم تخبر فيها زائرك بأن الموقع يحتوي على هذه الإطارات وأنه يحتاج إلى متصفح مناسب (علی الأقل لكي تخفف 
عنه الصدمة)!! 
وماذا بعد...؟ لم يبق أي شيء ليذكر في هذا الدرس فقد قمنا بمناقشة جميع خصائص الإطارات عدا الخاصية 
M٤‏ . ما رأيك لو قمنا بالتدرب على إنشاء نسخة من هذا الموقع باستخدام الإطارات في الدرس التالي؟ 
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الدرس الحادي عشر 
الإطار ات )3( 


كما ترى من العنوان لا زلنا نتابع في موضوع الإطارات» وفي القسم الثالث منه. وذلك لأهمية هذا الموضوع وتشابك 
خطوطه. وخصوصا لأننا نحتاج إلى التعامل مع أكثر من وسم في نفس الوقت وداخل أكثر من ملف. مما يستدعي 
التركيز والتروي عندما نريد إنشاء صفحة إطارات. 


لقد أنهينا في الدرسين الماضيين شرح كافة الوسوم والخصائص التي تتعلق بالإطارات»› عدا واحدöة‏ هي NAME‏ 
ووعدتك أن أقوم بشرحها بصورة وافية في درس مسنقل. كما وعدتك أن نقوم بإجمال موضوع الإطارات والتدرب 
عليها من خلال مثال واقعي يتمتل بإنشاء صفحة إطارات لهذا الموقع وهاأنا ذا أفي بو عدي . 


لقد قلت إن هذه الخاصية تعتبر من أهم خصائص الوسم ۷٤<‏ ۴۸۸> لأنها تحدد طريقة تنسيق العمل بين الإطارات 
والصفحات وأسلوب عرضها. لنعتبر هذا تعريفاً مبدئياً. ولکي أوضح لك الهدف من هذه الخاصية»ء قم باستعراض 
المثال التالي tp ://www.khayma.com/hpinarabic/examples/mainfile.html‏ الذي قمت فيه بتمثیل 
بعض الأجزاء من هذا الموقع (لنترك تلك الأمتلة المملة التي كنا نعمل عليها في الدرسين السابقين ولنبدأ بالعمل 
الجدي). وأنقر علی أزرار ا التشعبية الموجودة في الإطار. 
ماذا وجدت؟!؟ إن الصفحات تظهر في نفس الإطار (أعرف أنك كنت تتوقع ظهورها في الإطار الآخر... فهل خيبت 
ظتك؟). حسناء لا زالت هذه الإطارات تحتاج إلى القليل من العمل لكي تعمل كما يجب. وقبل أن نكمل أود أن نتمعن 
في الشيفرات التاليةء وهي في الواقع الشيفرات الخاصة بالملفات المستخدمة في هذا المثال. وأرجو أن تقوم بدراستها 
جيداء على الأقل لكي تكون متأكدا من فهمك لكل الأفكار السابقة قبل أن تنتقل إلى النقاط التي ستلي. 


شيفرة الملف الرئيسي الذي أسميته 1ص†mainfile.h‏ 


<HTML> 

<HEAD> 

<TITLE>Main File</TITLE> 

</HEAD> 

<FRAMESET ROWS="60,*"> 

<FRAME SRC="header.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1"> 
<FRAMESET COLS="120,*"> 

<FRAME SRC="Iftframe.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1"> 
<FRAME SRC="htmintro.html"> 

</FRAMESET> 

</FRAMESET> 

</HTML> 


شيفرة الملف العلوي (الترويسة) الذي أسميته 11٤ط.ade۲ءط‏ 


<HTML> 

<HEAD> 

<TITLE>Header File</TITLE> 

</HEAD> 

<BODY bgcolor="#BCD8EB"> 

<CENTER><IMG SRC="frambnr.jpg"></CENTER> 
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</BODY> 
</HTML> 


شيفرة الملف الذي يحتوي على الأزرار والوصلات التشعبية والذي أسميته 1ftframe.htn]‏ 


<HTML> 

<HEAD> 

<TITLE>Buttons</TITLE> 

</HEAD> 

<BODY BGCOLOR="#BCD8EB"> 

<A HREF="htutorO01.htmI"><IMG SRC="lesson1.jpg"></A><BR> 
<A HREF="htutor02.htmI"><IMG SRC="lesson2.jpg"></A><BR> 
<A HREF="htutor03.htmI"><IMG SRC="lesson3.jpg"></A><BR> 
<A HREF="htutor04.htmI"><IMG SRC="lesson4.jpg"></A><BR> 
<A HREF="htutorO05.htmI"><IMG SRC="lesson5.jpg"></A><BR> 
</BODY> 

</HTML> 


وبالطبع بقي لدينا الإطار الأكبر وهو لا يحتوي على ملف خاص لأنه الإطار العام الذي نريد إظهار الملفات فيه. ولن 
يتم إجراء أي تعديل على تلك الملفات. وبصورة مبدئية لقد شاهدت أنه يحتوى على صفحة المقدمة والمسماه 
htmintro.html‏ 


وهنا يأتي دور الخاصية N.۸۴‏ والتي نقوم من خلالها بتعيين اسم ما للإطار -أي الإطار الذي نرغب أن تظهر به 
الملفات عندما نقوم بالنقر على الوصلات التشعبية- حيث سيتم فيما بعد استخدام هذا الإسم من أجل استهداف هذا 
الإطار من قبل الوصلات التشعبية في الإطارات الأخرى أو حتى في الصفحات الأخرى. 

وبالمناسبة فقد حان الآن ذكر خاصية جديدة من خصائص الوسم <4> ... <4/> ( وهو وسم الوصلات التشعبية كما 
عرفت في الدرس السادس.) وهذه الخاصية هي .١۸۸6 ٤٣‏ (انتظر قليلا وستعرف لماذا) 


دعنا نقوم بترتيب الأمور بصورة أكثر وضوحا وتسلسلا: 

برأيك بأي من الملفات الثلاثة السابقة يجب أن نضع الخاصية "۸×۷٤‏ سؤال سخيف! آليس كذلك؟ طالما أنها إحدى 
خصائص الوسم >۴8R4۸ ۷٤<‏ إذن من البديهي جداً أن ترد معه. وبما أن هذا الوسم يوضع فقط في الملف الرئيسي 

إذن هي توضع في الملف الرئيسي... هذه أصبحت واضحة! لکن مع أي وسم من وسوم ۷٤<‏ ۴۸۸> الموجودة في 
الملف الرئيسي؟؟ بالطبع ليس مع الوسم الخاص بتعريف ملف الترويسة فهذا لا نريد استهدافهء وكذلك الأمر بالنسبة 

لتعريف ملف الوصلات التشعبية الذي لا نريد استهدافه أيضا. إذن لم يبق لدينا إلا الوسم الخاص بتعريف الإطار العام 
الذي ستظهر به الملفات. وبافتراض أننا نريد تسمية هذا الإطار بالاسم 0Wل1‏ 1س١‏ اة.. وهو اسم اختلقته أنا حسب ما 
أريد وأستطيع إعطاءه أي اسم آخر أريده طالما أنه يبدأ بحرف أبحدي أو رقم وليس برمز خاص متل /؟%5#“^ (عدا 
الرمز _ الذي يستخدم في حالات خاصة سأذكرها لك لاحقا في هذا الدرس). 


إذن تصبح شيفرة الملف الأساسي هي: 


<HTML> 
<HEAD> 
<TITLE>Main File</TITLE> 
</HEAD> 
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<FRAMESET ROWS="60,*"> 

<FRAME SRC="header.htmI" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1"> 
<FRAMESET COLS="120,*"> 

<FRAME SRC="Iftframe.html" NORESIZE SCROLLING="NO" MARGINHEIGHT="1" MARGINWIDTH="1"> 
<FRAME SRC="htmintro.html" NAME="mainwindow""> 

</FRAMESET> 

</FRAMESET> 

</HTML> 


وبهذا نكون قد إنتهينا من إعداد الملف الرئيسي ليكون ملف إطارات فعال مائة بالمائة. ونستطيع الآن استهداف ذلك 
الإطار من أي مكان باستخدام الإسم الذي عرفناه به. 


المرحلة الثانية هي تعريف الوصلات التشعبية بطريقة تجعل الملفات المتعلقة بهذه الوصلات تظهر في الإطار المحدد. 
وهنا يأتي دور الخاصية ۲۸۸86٤1‏ سالفة الذكر لكي تقوم على الرحب والسعة بأداء هذه الوظيفة. وسوف نعمل الآن 
على الملف المسمى اصاط.٥د.ه۲؟]؟1.‏ ليس هو الملف الذي يحتوي على الوصلات التشعبية؟! ليصبح بالشكل التالي: 


<HTML> 

<HEAD> 

<TITLE>Buttons</TITLE> 

</HEAD> 

<BODY BGCOLOR="#BCD8EB"> 

<A HREF="htutor01.html" TARGET="mainwindow"><IMG SRC="lesson1.jpg"></A><BR> 
<A HREF="htutor02.html" TARGET="mainwindow"><IMG SRC="lesson2.jpg"></A><BR> 
<A HREF="htutor03.html" TARGET="mainwindow"><IMG SRC="lesson3.jpg"></A><BR> 
<A HREF="htutor04.html" TARGET="mainwindow"><IMG SRC="lesson4.jpg"></A><BR> 
<A HREF="htutorO5.html" TARGET="mainwindow"><IMG SRC="lesson5.jpg"></A><BR> 
</BODY> 

</HTML> 


ل تما ال داك 


الحقيقة أننا لم ننجح بصورة مطلقةء بل إلى حد ما... وأعتذر لك لأني نغصت عليك هذا النجاح. لكن طالما أننا نريد 


الوصول إلى أفضل مستوى وأعلى أداء لموقعنا فيجب علينا دائماً تطبيق القواعد التي تضمن ذلك. ولكي أوضح لك 
السبب الذي يجعلني أتكلم كالفلاسفة سوف أطلب منك العودة إلى الصفحة الرئيسية للإطارات بعد أن قمت بإضافة 
وصلات تشعبية إضافية لهاء واحدة خاصة بالإنتفال إلى صفحة الإطارات نفسهاء أي إعادة تحميل الصفحة على الشاشة. 
و ل بن طوف رض ا فار ت لى رض درن ارات رك جر اشر غل هد رضت 
الجدبدة. 


مشكلة جديدة»ء ليس كذلك؟ ففي الحالة الأولى تم تحميل الصفحة داخل الإطار نفسه»ء وبذلك أصبحت الصفحات متداخلة 
في ما بينهاء وكذلك الأمر في الحالة الثانية. أي أننا بإختصار لا نستطيع إبقاء الوسم بالشكل: 


<A HREF="filename.html" TARGET="mainwindow"> ... </A> 
كما لا نستطيع کتابته بالشکل التالى‎ 
<A HREF="filename.html"> ... </A> 


وطبعا أنت تعرف السبب في كلتا الحالتين. 
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لقد وقعنا في مصيدة الإطارات. إذن فما الحل؟ الحل توفره لغة 1۲M‏ نفسها من خلال وضع قيمة معينة للخاصية 
"AR G۴1‏ وهي "_1٥p"‏ لتخبر المتصفح أن يقوم بتحميل الصفحة في المستوى الأعلى من الشاشة. أي ان يقوم 
بإلغاء أي إطارات أو صفحات عادية موجودة أصلا وأن يحمل الصفحة الجديدة مكانها. وهذه القيمة معرفة بشكل مسبق 
في لغة 11M‏ وليست من عندي كما في الإسم W1 10W‏ 1 21". 

والحقيقة أنه يوجد ثلاث قيم أخرى بالإضافة إلى مه)_ معرفة بشكل مسبق في لغة ا11 لتحدد موقع ظهور 
الصفحة المعنية. ويجب أن تتذكر دائماً أنها تكتب بالأحرف الصغيرة ٥۲٠۵8‏ س0[. فإذا كتبت بالأحرف الكبيرة فلن 
تحصل على النتيجة التي تريدها لأنها ستعتبر في هذه الحالة وكأنها أسماء عادية. وهذه هي القيم الأربعة: 


_top 


تحمل الصفحة في أعلى مستوى للشاشة أي تلغي الإطارات الموجودة أصلا 


TARGET=" lop" 


_blank 


تقوم بفتح شاشة جديدة وفار غة للمتصفح وتعرض الصفحة المحملة فيه 


TARGET="_blank" 


_self 


(الحالة الإفتراضية) تقوم بتحميل الصفحة في نفس الإطار الذي توجد به الوصلة التشعبية التي تم 
النقر عليهاء (وبالطبع هذا ما يحدث دائما دون وجود هذه القيمةء ليس كذلك؟) 
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TARGET =" self" 


_ parent 


تقوم بعرض الإطار المحمل مكان الإطار الأب» 
وتأمل الشكل التالي الذي يمثل صفحة إطارات مركبة. 


أنت تعرف أننا نحتاج إلى ثلاثة أزواج مù‏ لوسم </FRAMESET> ... <FRAMESE1>‏ 
لإخراج مثل هذه الصفحة. 


ه الأول لتحديد الصفحة ككل 
ه الثاني لتحديد الإطارين 2 و 3 المتفرعين من الصفحة الرئيسية 
ه الثالث لتحديد الإطارين 4 و 5 المتفرعين من الإطار 3 


وبالتالي نقول أن الصفحة الرئيسية هي الأب (أو الأم إذا أردت) للإطارين 2 و 3 وأن الإطار 3 هو 
الأب للإطارين 4 و 5. وعلى سبيل المثال إذا احتوى الإطار 5 أو 4 على وصلة تشعبية هدفها القيمة 
renهم_‏ لتم تحميلها مكان الإطار 3... وهكذا الأمر بالنسبة للإطارين 1 و 2 بمقابل الصفحة 
الرئيسية. 

وللتمييز بين هذه القيمة والقيمة مه _ فإن القيمة مه]_ تقوم بالتحميل في المستوى الأول (الأعلى) 
دائما وبغخض النظر عن موقع الوصلة التشعبية. 

ونعود الآن إلى صفحتتا. فلو أت ضفنا السطرين التاليين إلى ملف الوصلات التشعبية: 


<A HREF="mainfile.html" TARGET="_top"><IMG SRC="mainpage.jpg"></A><BR> 
<A HREF="htmintro.htmI" TARGET=" top"><IMG SRC="noframes.jpg"></A><BR> 


لحصلنا على النتيجة المرجوة. جرب ذلك وبذلك تستطيع أن تقول وبكل ثقة 


فجحنا بجدارة 
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الدرس الثاني ڪشر 
وسوم ... من هنا وهناك!!! 


كما ترى من العنوان فقد اخترت أن يكون هذا الدرس خارجا قليلاً عن نطاق الدروس السابقة من حيث المحتوى. فلن 
تجد هنا وسوماً محددة تستطيع حصرها تحت موضوع معين» بل وسوما عامة وخصائص إضافية لوسوم ذكرت سابقاً. 
وإن كان الهدف من معظمها ترتيب الصفحة والتحكم بشكل محتوياتها. ولا أخفي عليك أني قصدت تأجيل بعضها حتى 
هذا الدرس مع أنه كان من الممكن إدراجها ضمن دروس سابقة» وخاصة الدرس الرابع (الفقرات). لكن حجتي في عدم 
إدراجها في حينه أن هذه الوسوم لن يتم استخدامها ولن ثفهم طريقة عملها إلا عند استخدام وسوم أخرى تم شرحها في 
وقت لاحق بعد الفقرات مثل الصور والجداول. أما البعض الآخر ففضلت عدم حصرها ضمن أي درس على اعتبار 
أنها وسوم عامة لا تختص بأي موضوع. على أية حال يكفينا هذه المقدمة وأترك لك حرية تصنيفها كما يحلو لك. 


أترى هذا الخط الذي فصلت به هذه الفقرة عن الفقرة السابقة؟ إنه يسمى بلغة 111 بالمسطر ة الأفقية 1ھ" Hor1z0‏ 


<HR> 
ليظهر لديك هذا الخط:‎ 
وأتبعتها برقم يمثل هذا‎ 817٤ لكن هذا ليس كل شيء. لأنك تستطيع تحديد سُمك هذا الخط إذا أضفت له الخاصية‎ 
السمك متلاً:‎ 
<HR SIZE="5"> 
<HR SIZE="1"> 
<HR SIZE="10"> 


كذلك يمكنك تحديد عرض الخط باستخدام الخاصية ۷1018 والتي من الممكن أن تأخذ قيمة مطلقة أو نسبية 


<HR WIDTH="80%"> 


<HR WIDTH="400"> 


<HR SIZE="5" WIDTH="60%"> 
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ومن الخصائص الأخرى لهذا الخط خاصية المحاذاه ۸-16١‏ والتي تأخذ القيم center, left, right‏ 


<HR WIDTH="80%" ALIGN="center"> 


<HR WIDTH="400" ALIGN="left"> 


<HR SIZE="5" WIDTH="60%" ALIGN="right"> 


وكما تلاحظ فإن هذا الخط يكتسب مظهرا غائرا ثلاثي الأبعاد وإذا أردت خطا عاديا غير غائر فقم بإضافة الخاصية 
NOSHADE‏ 


<HR SIZE="5" WIDTH="60%" ALIGN="center" NOSHADE> 


أما إذا كان لون هذا الخط لا يعجبك» فما من مشكلة إذ أنك تستطيع اختيار اللون الذي يعحبك من خلال الخاصية 
Jaza) COLOR‏ قط (Explorer MS ga‏ 


<HR SIZE="5" WIDTH="60%" ALIGN="center" COLOR="#FFOOO0O" NOSHADE> 


الوسم التالي في هذه المجموعة هو وسم الملاحظات <!-- ... --> ونستخدمه عند الحاجة لكتابة بعض الملاحظات 
الخاصة أو العبارات التو ضيحية ضمن الملف والتي يقصد أن لا تظهر عند استعر اض هذا الملف في المتصفح. 
This is line one<BR>‏ 
This is line two --><BR>‏ --!< 
and, this is line three<BR>‏ 
وهه هي النتيجة 
This is line one‏ 


and, this is line three 


من المؤكد أنك تعرف الوسم <8۸> والذي يقوم بالتحكم في نهايات الأسطر (أي أنه ينهي السطر الحالي بحيث يظهر 
لكي تتوضح لك طبيعة عمل هذه الخاصية»ء قم بمراجعة ما ذكرناه في الدرس الخامس عن الصور والرسومات» 
واستخدام الخاصية ۸116١‏ التي تحدد موقع هذه الصور على الصفحة. حسناء لقد إتفقنا في حينه على أن القيمة 
عا توجه الصورة إلى يمين الصفحة وأن النص الذي يليها يظهر ملتفا بعدة أسطر على الجهة اليسرى. وكذلك الأمر 
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(بصو رة معكوسة) عند استخدام القيمة ا؟ه[. وحتى لو استخدمنا القيمة 10۳هط أو لم نقم بإضافة الخاصية A L16۸‏ 
أصلاء فسوف نجد أن النص الذي يليها يظهر بمحاذاة الحافة السفلى للصورة. 


يتلخص عمل الخاصية K1 84R‏ في منع النص من الإلتفاف على أي من جانبي الصورة. 

وهي تأخذ القيم ٤1ع‏ التي ا اشن إلا عند بداية الهامش الأيمن الفارغ بعد الصورة (أي بمنتهى البساطة 
تن تعرز الس ر قاف ى الح العري لور بد لمك هة رة انون لقعا وناد قان م اة 
تستخدم عندما تكون قيمة ×16[ للصورة هي أطع!ا. 


وبتفس المبدأً لكن بصورة معكوسة نستخدم القيمة 16۴ والتي في نتيجتها تمنع إلتفاف النص على الجهة اليمنى من 
الصورة. وذلك عندما تكون محاذاة الصورة هي ا٥1‏ 


منطق معكوس... اليس كذلك؟ على أية حال إذا كنت تكرة هذه التعقيدات وتحب الطرق المختصرة مثلي» فاستخدم 
القيمة 1[ التي تمنع الإلتفاف من جميع الجوانب. 


ما رأيك أن نقتبس بعض الأمثلة من الدرس الخامس لنشاهد كيف تعمل مع إضافة هذه الخاصية؟ وسوف أدرج هذه 
الأمتلة كما هي نصا وحرفا أما الإضافات فهي المميزة باللون الأحمر 


RIGHT 


أما هذه القيمة فتؤدي إلى محاذاة الصورة إلى أقصى اليمين. مع التفاف النص الذي يليها على 
الجهة اليسرى ولعدة أسطر حسب ارتفاع الصورة. 


<IMG SRC="image.jpg" ALIGN="RIGHT"> 
<BR CLEAR="right"> 


فإذا أضفنا الوسم < 8> مع الخاصية ٤"‏ عإ"= ۸ K1 8E۸‏ لوجدنا أنها منعت النص من 
الإلتفاف 


RIGHT 
هذه القيمة فتؤدي إلى محاذاة الصورة إلى أقصى اليمين. مع التفاف النص‎ 8< 
لذي يليها على الجهة اليسرى ولعدة أسطر حسب ارتفاع الصورة.‎ 


<IMG SRC="image.jpg" ALIGN="RIGHT"> 
<BR CLEAR="left"> 


نلاحظ أن لا فائدة من استخدام الوسم <8> مع الخاصية "۴ C18۸ ۸=" [٥‏ فكل ما فعلته 
هو إضافة سطر فار غ أعلى النص 
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حستا انت القيمة 1٥۴٤‏ في مکانها الصحيح»› أي مع المحاذاة 1۴ 


LEFT 


هذه القيمة تؤدي إلى محاذاة الصورة إلى أقصى اليسار. مع التفاف النص الذي يليها على 
الجهة اليمنى ولعدة أسطر حسب ارتفاع الصورة. 


<IMG SRC="image.jpg" ALIGN="LEFT"> 
<BR CLEAR="left"> 


الآن تعمل هذه القيمة كما يجب (لا شيء أفضل من وضع الوسم المناسب في المكان 
المناسب!) 


وأترك لك المجال لكي تجرب القيمة 411 بنفسك 


من القواعد الإفتراضية للمتصفحات أن الأسطر في كل فقرة تلتف وتنقسم بصورة تلقائية حسب إستبانة الشاشة وعرض 
نافذة المتصفح. (هذه نعرفها من الدرس الأول). لكن لنقل أننا نريد من أحد الأسطر أن لا ينقسم مهما كان مقدار 
الإستبانة وعرض النافذة. 

<NOBR> ... </NOBR> 


وهي إختصار لِ N0‏ kهء‏ 8۸ أي (لا إنقسام). 
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الدرس التثالث عشر 
الخرائط الصورية 


مع بداية هذا الدرس تكون قد قطعت شوطا طويلاً مع هذه اللغة» وأصبحت قادرا على إنشاء صفحات الويب بصورة 
ال ومسص فا درن لا ر اك م افر كع ام دو ع ماولفت رر ای ل هی ت ك 


أنت تعرف بلا شك من خلال دراستك للوصلات التشعبية»ء أننا نستطيع إدراج أي صورة نريدها لتمثل وصلة تشعبية 
ما. لكن ما رأيك بصورة واحدة تحتوي على العديد من هذه الوصلات التي تقوم بإيصالنا إلى مواقع مختلفة!!؟ هذا هو 
ببساطة مبدأ الخرائط الصورية. من المحتمل أن تكون لا تعرفها وأن يكون هذا الموضوع جديدا عليك» لكن من المؤكد 
أنك استخدمتها من قبل. 


إذن» إضافة إلى الوسوم الجديدة الخاصة بالخرائط والتي سنتعرف عليها من خلال هذا الموضوع سوف نعود أيضا 

للتعامل مع وسوم الصور (بما أننا نتحدث عن خرائط صورية) كذلك سنتعامل مع الوصلات التشعبية (كون الخرائط 
الصورية هي تطبيق آخر للوصلات).. وستحتاج أيضا إلى القليل من الهندسة (نعم .. الهندسة. ذلك العلم الذي يجبرك 
المعلم فيه على حمل البيكار لترسم به دائرة.. فتكون النتيجة شكلا عجائبيا قد يكون أي شيء .. إلا أن يكون دائرة). 
وأخيرا نحتاج إلى أحد برامج تحرير الصور متل ١إ۴‏ م0ط؟ مه۴ لمساعدتنا في معرفة بعض التفاصيل الخاصة 

بالصور. 


هل أنت مستعد؟ لننطلق إذن. 


هذه هي خريطتنا أو بالأحرى ما سوف تصبح بعد قليل خريطتنا .. مجرد صورة عادية سنقوم بإدراجها في الصفحة. 


وهذه هي الشيفرة الخاصة بادراجها 


<IMG SRC="flowers.jpg" WIDTH="320" HEIGHT ="310" BORDER="0"> 
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والآن سوف نضيف لهذه الشيفرة خاصية جديدة من خصائص الوسم >1۷6< هي USEMAP="#map_name"‏ 
والتي تخبر المتصفح أن یستخدم هذه الصورة كخريطة وذلك حسب التحديدات الموجودة في تعريف هذه الخريطة 
(وسنتحدث عن هذه التحديدات لاحقا إن شاء الله). أما القيمة ١12_م4‏ فهي تمتل الاسم الذي نريد أن نعيّنه 
للخريطة (آي اسم نریده). وکما نری فان هذا الاسم مسبوق بإاشارة #. 
ما رأيك أن نسمي الخريطة باسم ص01۲703. عندها سوف تصبح الشيفرة كما يلي: 

<IMG SRC="flowers.jpg" WIDTH="320" HEIGHT="310" BORDER="O0" USEMAP="#ourmap"> 


وكانت هذه هي الخطوة الأولى في تعريف الخريطة. والخطوة الثانية هي تحديد التفاصيل. 


لنقم بإخبار المتصفح أننا نريد خريطة تحمل الإسم 01۲12 
<MAP NAME="ourmap">‏ 
<IMAP>‏ 


ولاحظ أننا لا نستخدم إشارة # مع التسمية هنا 
د نك نكا أن تح المناطق الساخنة للرصاكت التتمة ر لفتر شن أا تريدها فكل القالى: 


وهنا أريد أن أوّكد عليك وبصورة مشددة أن رسم هذه الأشكال الهندسية هو فقط بغرض توضيح مبداً المناطق الساخنة 

ورسمها بصورة عشوائية» بمعنى أنك تستطيع إختيار أي مناطق أخرى مغايرة كما تستطيع إختيار أي أشكال تريدها. 

هو استخدام الوسم <84 4۸> والذي يدر ج ضمن الوسم السابق وبنفس عدد المناطق الساخنة التي نريدها. 
<MAP NAME="ourmap">‏ 
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للمرية من اله م هاف الامرب فلن راردا 
<AREA>‏ 
<AREA>‏ 


<AREA> 
<AREA> 


</IMAP> 


ومع ذلك فهذا ليس کل شيء لأننا نحتاج أولا لتحديد شكل كل : منطفَة وذ نستخدم لهذا الغرض الخاصیية 91۸۴٤‏ ومن تم 
نحتاج لتحديد موقع كل منطقة وهذا يتم بالخاصية K00R5S8S‏ وأخيراً بما أن كل منطقة تمثل وصلة تشعبية وتشير إلى 
عنوان موقع ما فمن البديهي أن نستخدم خاصية تحديد المواقع وهي 1۸٤۴‏ والتي مرت معنا في الدرس السادس 


تأخذ الخاصية 5914۴۴ ثلاثة قيم لتحديد شكل المنطقة الساخنة وهي: 


RECT 

CIRCLE 
للدوائر‎ 

POLY 


للغل ارف وال اة 


ولدينا دائرة ومستطيل وشكلين عشوائيين» إذن تصبح الشيفرة كما يلي (دون أهمية لترتيبها): 
<MAP NAME="ourmap">‏ 


<AREA SHAPE="poly"> 
<AREA SHAPE="rect"> 
<AREA SHAPE="circle"> 
<AREA SHAPE="poly"> 


</IMAP> 


ات الآن إلى تحديد موقع كل شكل من الخريطةء والذي يتم باستخدام الخاصية .0]00R 5S‏ تأخذ هذه الخاصية قيما 
رقمية تمثل إحداثيات الشكل الهندسي بالبيكسل على الخريطة (ألم أقل لك أناك ستحتاج إلى القليل من الهندسة) ومن 
البديهي أن تختلف دلالة كل قيمة بإختلاف الشكل المقصود. أنظر إلى الأشكال التوضيحية التالية: 


22 
4AREA SHAPE-="rect" COORDS="x1 yl 2 y2" „> 
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في الشكل الرباعي المنتظم نحتاج لمعرفة إحداثيي الزاوية اليسرى العليا وإحداثيي الزاوية اليمنى السفلى. (أربعة أرقام) 


AREA SHAPE="circle" COORDS="xyg" > 


أما في الدائرة فكل ما نحتاجه هو إحداثيي نقطة المركز لهذه الدائرة بالإضافة إلى معرفة نصف قطرها. (ثلاثة أرقام 


AREA SHAPE-="poly" COORDS="x] y1 xû y2, 
2 "کر کرو ق‎ 


وأخيراً في الأشكال المضلعة العشوائية نحتاج لمعرفة إحداتيي كل نقطة من النقاط التي تمثل زوايا هذا الشكل مهما كان 
عددها. (عدد الأرقام غير محدد ويختلف بإختلاف الشكل المقصود) 


وقد تسأل الآنء كيف نستطيع إيجاد هذه الإحداثيات؟ ما من مشكلة! هنا يأتي دور برنامج الجرافيكس» فكل ما عليك هو 
تحميل الصور في هذا البرنامج ثم وضع المؤشر في المكان المطلوب وسوف تشاهد إحداثيات النقطة التي يقع عليها 
المؤشر على الشريط الموجود أسفل نافذة البرنامج. وبالإضافة لذلك تستطيع معرفة أبعاد الصورة ككل. وعلى أية حال 
كل ما عليك فعله هو تسجيل إحداثيات جميع النقاط المطلوبة من أجل استخدامها في تعريف الخريطة. 
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ولنعد الآن إلى خريطتتا: 


® Paint Shop Pro - Howers.jpq 
Fle Edt View Image Colors Layers Selections Maske Cape W 


E A a TL 


2Z REANS IH?RE 27| 


س 


EEEE 


111118] [mage: 320# 310» TE Mion 


بالنسبة للشكل المستطيل كانت إحداثيات النقطة العليا هي:(28,255) وإحداثيات النقطة السفلى هي (10,300). 


أما الدائرة فكانت إحداثيات نقطة مركزها هي (140,160) ونصف قطرها 175 بيكسل. 


أما الشكل المضلع الأيمن (المثلث) فأن إحداثيات زواياه هي (150,10), (300,20), (315,230) وتذكر هنا أن لا 
أهمية للترتيب في ذكر هذه النقاط. المهم فقط أن تكون الإحداتيات دقيقة إلى حد ما. 


وأخيراً فإن إحداثيات النقاط في الشكل المضلع الأيسر (الرباعي) هي: (10,10), (130,10), (110,65), (10,140) 


لنقم الآن بكتابة هذه البيانات ضمن الشيفرة السابقة والتي ستصبح كما يلي: 


<MAP NAME="ourmap"> 


<AREA SHAPE="poly" COORDS="10,10,130,10,110,65,10,140"> 
<AREA SHAPE="rect" COORDS="28,255,310,300"> 

<AREA SHAPE="circle" COORDS="140,160,175"> 

<AREA SHAPE="poly" COORDS="150,10,300,20,315,230"> 


</IMAP> 


ماذا بقي الآن؟ بقي تعيين العناوين التي ستشير إليها الوصلات التشعبية والتي سنستخدم لها الخاصية 1۸۴۴ . إليك 
عناوين أربعة من المواقع العربية الممتازة 


<MAP NAME="ourmap"> 


<AREA SHAPE="poly" COORDS="10,10,130,10,110,65,10,140" 
HREF="http://www.sakhr.com"> 
<AREA SHAPE="rect" COORDS="28,255,310,300" 
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HREF="http://www.ayna.com">‏ 
<AREA SHAPE="circle" COORDS="140,160,175"‏ 
HREF="http://www.pcmag-arabic.com">‏ 


<AREA SHAPE="poly" COORDS="150,10,300,20,315,230" 
HREF="http://www.asp.com.lb"> 


</IMAP> 


وأخيرا بعد تجميع الشيفرة الخاصة بإدراج الصورة مع هذه الشيفرة بالشكل التالي. (وبالمناسبة فقد قمت بالتجميع من 
أجل توضيح النتيجة النهائية لشيفرة الخريطة ككل. وفي الواقع أننا نستطيع وضع تعريف الخريطة في أي مكان نريده 
داخل الملف وليس شرطا أن يكون قريبا من شيفرة إدراج الصورة) 


<IMG SRC="flowers.jpg" WIDTH="320" HEIGHT ="310" BORDER="O0" USEMAP="#ourmap"> 
<MAP NAME="ourmap"> 


<AREA SHAPE="poly" COORDS="10,10,130,10,110,65,10,140" 
HREF="http://www.sakhr.com"> 

<AREA SHAPE="rect" COORDS="28,255,310,300" 
HREF="http://www.ayna.com"> 

<AREA SHAPE="circle" COORDS="140,160,175" 
HREF="http://www.pcmag-arabic.com"> 

<AREA SHAPE="poly" COORDS="150,10,300,20,315,230" 
HREF="http://www.asp.com.lb"> 


</IMAP> 


والآن أريد أن أثير مسألتين مهمتين في هذا السياق: 

الأولى: ماذا لو أردنا إدراج هذه الخريطة أكثر من مرة في الصفحةء فهل نحتاج إلى تكرار كتابة الشيفرة >۷1A4۴<‏ ... 
<۴ 14/> مع كل مرة ندرج فيها الصورة؟ الجواب قطعاً لا.!! 

فطالما أننا نكتب الخاصية 4۴ 05EM‏ فإن المتصفح يقوم بالبحث عن شيفرة الخريطة التي حددنا اسمها مع هذه 
الخاصيةء ومن ثم يطبقها على الصورة المعطاة مهما كان عدد مرات إدراجها. 


الثانية: ماذا لو قررنا إلغاء هذه الصورة ووضع صورة أخرى مكانها. هل من مشكلة؟ أيضا لا يوجد هنا أي مشكلة. 
لأن تعريف الخريطة بطبيعته غير مرتبط بصورة محددة بعينها. هو فقط يعرف مناطق محددة بالشكل والموقع. ولو 
دشت انر في هذا قافن جد ما يتير ل آتها فرط بصررة بها لین كد بل الك لو ارج صورة 
أكبر مما يجب أو حتى صورة أصغر مما يجب واستخدمت خاصية 054۴ معهما لتشير إلى الخريطة» فلن تواجه 
أي مشكلة في ذلك. (وأعني هنا مشكلة للمتصفح) لكن بالطبع فالصورة الكبيرة ستحتوي على مناطق دون وصلات 
تشعبيةء» والصورة الصغيرة سوف لن تحتوي على بعض الوصلات المعرفة في الخريطة 
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والخلاصة أن تعريف الخريطة هو تعريف مشاع يوضع مرة واحدة فقط وفي أي مكان داخل الصفحة» وبشرط أن 
يكون ضمن <802۷> ... <805¥/> وبالمقابل نستطيع إدراج عشرات الصور مهما كانت طبيعتها داخل الصفحة 
لتكون خر ائط صورية تستخدم نفس تعريف هذه الخريطة طالما أننا وضعنا الخاصية "eدmap_1aı#"=USEMAP‏ 
مع هذه الصور. 


ومسك الختام: تحفل الإنترنت بالكثير من البرامج التي تقوم بتصميم الخرائط الصورية بسرعة وسهولة متناهيتين. . فقط 
تقوم بتحميل الصورة المطلوبةء ثم ترسم الأشكال التي تريدها عليها كما لو كنت تستخدم برنامج الرسام» ومن ثم تكتب 
عناوين الوصلات التشعبية المطلوبة لكل من هذه الأشكال. وهكذا ببساطة يقوم البرنامج بإيجاد الإحداثيات الخاصة بكل 
شكل و إنشاء شيفرة ة الخريطة المطلوبة!! أي أنك خلال دقائق معدودة تستطيع إنشاء أعقد الخرائط الصورية. . لكن بما 
أنك تهو ى الصعب ونتحدى المستحيل فلا اعتقد أنك ستفضل هذا النوع من البرامج. (بالمناسبةء لقد فضلت تأخير كتابة 
هذه الملاحظة حتى نهاية هذا الدرس› لأني لو وضعتها في البداية لما أكملت هذا الدرس أصلاً ولهر عت للإنترنت 
للبحث عن متل هذه البرامج) وعلى أية إليك هذا العنوان لبرنامج رائع يدعى ٥ع4".] ¡ve‏ 
ndex.phpښ/ttp://www.mediatec.com/a‏ آتمنی لك خرائطاً سعیدة دائماً . 
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الدرس الرابع عشر 
النماذج (1) 


سيكون هذا الدرس الأول من درسين سنتحدث فيهما عن النماذج وكيفية ية تضمينها في صفحات الويب. 


E اسا ل من اا إيجاد‎ E 
جهة أخرى ...أحيانا قد تحتاج كمصمم لموقع ويب أن تعرف آراء زوار موقعك في مسائل معينة وقد تكنفي برسائل‎ 
البريد الإلكتروني التي يرسلوها لك لكن عندما تريد معرفة أشياء محددة بذاتها فإن النماذج هي الخيار الأفضل لك.‎ 
بالإضافة إلى إمكانية تنظيم البيانات المدخلة من خلالها وسهولة وسرعة استخدامها من قبل زوار الموقع. ومن أبرز‎ 
الأمثلة على النماذج في مواقع الويب هي دفاتر الزوار وصفحات البحث عن الكلمات أو العبارات داخل المواقع.‎ 


لا تكمن صعوبة التعامل مع النماذج في كونها معقدة بحد ذاتهاء كلا ... فهي إحدى العناصر التي تدعما لغة HTML‏ 
وهي مجرد وسوم عادية مثلها مثل الوسوم التي تعاملنا معها في جميع الدروس السابقة. وبإمكانك إنشاء النماذج في 
موقعك بنفس السهولة التي تدرج فيها جدولا أو إطاراً (هذا بالطبع إذا كنت تعتقد أن الجداول والإطارات سهلة) لكن 
التداخل بينها (وأعني النماذج) وبين لغات البرمجة المتقدمة في الويب مثل آ06 رأم ا4۷25[ هي ما يجعلها تختلف 
عن سابقيها من الوسوم أو العناصر الأخرى. خاصة إذا احتجت إلى بعض المقاطع البرمجية من هذه اللغات ضمن 
نماذجك. آما إذا اكتفيت بالإمكانات المتواضعة التي توفرها ا۲۲ بالنسبة للنماذج. فما من مشكلة... لأنه سيكون 
بإمكانك التعامل معها بكل بساطة. وفي هذا الدرس لن نتطرق بالطبع إلى أي من اللغات سوى اM١11.‏ 


ولنفترض الشكل التالي لدفتر زوار 


کم شکلا من شكال إدخال البيانات يوجد في هذا الدفتر؟ الحقيقة أنه يوجد ستة أشكال هي كالتالي: 


Text 
Option 1 ¥ 


UE E; 


lL 


أرسل 


انسى الأمر 
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وهي الأشكال الموجودة في الدفتر فقط. وأود أن ألفت نظرك إلى وجود أشكال أخرى سوف يتم التعامل معها من خلال 
هذا الدرس. 
زان 


والآان إلى العمل 


مع أن الأشكال السابقة تختلف عن ب بعضها البعض من حيث المبداً والمظهر (وطريقة التعريف أيضا) إلا أنها يجب أن 
تدر ج جميعاً ضمن وسمين ا ا 


</FORM> ... <FORM> 
وكما جرت العادة نحتاج لتحديد بعض الخصائص التي تتعلق بطبيعة هذا النموذج. ولدينا هنا ثلاث خصائص:‎ 
ACTION 


تخد اران الي ك ارتل كات اعوج إل لت اكا الور ة اط ر ور كرن ا ع 
لبريد إلكتروني اه٤‏ سوف يتم إرسال بيانات النموذج إليه. أو قد يكون عنوانا لبرنامج ٥61‏ موجود على 
كرتر لخاد 66 لای تر اح عفد ت الزن حت شقن هد لات رالا حب السات 
الموجودة فيه كأن يضيفها متلا إلى إحدى الصفحات (كما يحدث عادة في دفاتر الزوار) أو يتحقق من صحة 
بعض الحقول المدخلة ومطابقتها لمعايير معينةء أو أن يقوم بالبحث عن كلمة أو عبارة ضمن صفحات الموقع 
کا فی فاخ لنت البو دة ى مراقح الريب: 


<FORM ACTION="mailto:someone@domain.com"> ... </FORM> 
<FORM ACTION="name_and_address_of CGI_script"> ... </FORM> 


METHOD 


تة الطر ية التي سك مها الال مح اران البحد قالخا اة 6716١‏ وهاك قن ليذ 
الخاصية هما: 6٤1‏ التي تستخدم في حالة كون عملية المعالجة داخلية أي تتم داخل الخادم 96۲۷6۲ نفسه. 
ففي مثالنا السابق عندما نستخدم نموذج البحث عن كلمة في الموقع» فإن عملية المعالجة (أي البحث) تجري 
مباشرة في الموقع. والقيمة الثانية هي ا5٠۴‏ وتستخدم عندما تكون عملية المعالجة خارجية كان يتم إرسال 
البيانات إلى عنوان بريد إلكتروني. 


<FORM ACTION="mailto:someone@domain.com" METHOD="post"> ... </FORM> 
<FORM ACTION="name_and_address_of CGI_script" METHOD="get"> ... </FORM> 
ENCTYPE 


هذه الخاصية تحدد طريقة الترميز التي سيتم إرسال البيانات وفقا لها. وهي تأخذ القيمتين التاليتين: (يجب أن 
تكتب هذه القيم كما هي نصا وحرفاً) 


application/x-www-form-urlencoded 
text/plain 


وبدون الخوض في الأسباب التقنية التي دت إلى إيجاد هذين النوعين من طرق الترميز أو في أمور برمجية بعيدة عن 
موضوعناء فان الدافع لإستخدام أي من القيمتين هو طبيعة عملية المعالجة التي ستجرى على البيانات أو طبيعة برنامج 
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البريد الإلكتروني الذي ستستقبل هذه البيانات من خلاله (إذا کان يدعم M1٤‏ أم لاء وهي إختصار للعبارة -1) Mul‏ 
Extentions Mai Internet purpose‏ وهي من المعايير السائدة في الإنترنت والتي تتعلق بنقل جميع أنواع البيانات 
من صوت وصورة وليس فقط النصوص من خلال البريد الإلكتروني). وما يعنينا هنا هو الفرق بين الطريقتين من 
حيث طريقة إرسال واستقبال البيانات. فعند استخدام ١ذه1ام/ا×]‏ ستصل البيانات بالشكل التالي: 

NAME=Yahya Al-Sharif 


Address=Nablus , Palestine 
Email=yahya@palnet.com 


(الكلمات e‏ صه, ۴211 ,كيهل هي أسماء الحقول في النموذج ونقوم نحن بتعريفها أثناء عملية تصميم النموذج 
أما النصوص الظاهرة بعد إشارة المساواة فهي البيانات المدخلةء وسوف نتحدث عن تعريف أسماء الحقول بعد قليل) 
أ٘ما عند استخدام urlencoded-form-www-icati0n/xاapp‏ فستصل البیانات بالشکل: 


NAME=Yahya+Al-Sharif&Address=Nablus+,+Palestine&Email=yahya@palnet.com 


ولك أن تخيل مبلغ الصعوبة في تحليلها إذا احتوت على عشرات الحقول. لذلك تتوفر برامج خاصة تعرف ب 

46 تقوم بإعادة ترتيب البيانات المرسلة من خلال النماذج بشكل مفهوم بحيث تصبح كما لو كانت مرسلة 
بترميز ١1هام/ا×ه)‏ لكن لا تعتقد أن الطريقة الأولى هي الأفضل دائما فذلك يعتمد كما قلنا على طريقة المعالجة والنقل 
بالبريد. لذلك لا ضير من أن تجرب الطريقتين لتعرف أيهما أنسب لك. 


إذن خلاصة القول: قد تكون أفضل صيغة لتعريف النموذج في حالة أردت استقبال البيانات من موقعاك إلى عنوان 
بريدك الإلكتروني هي: 
<FORM ACTION="mailto:email@domain.com" MET HOD="post" ENCTYPE="text/plain">‏ 


</FORM> 


وبهذا نكون قد إنتهينا من عملية تعريف النموذج وخصائصه» لكن انتظر فما زلنا في بداية الطريق. 


نبدأً الآن في عملية تعريف أشكال البيانات في النموذج. ونستخدم الوسم >]N۴01<‏ لتعريفها والحقيقة أن هذه الأشكال 
هي مجرد خصائص أو بالأحرى قيم لخصائص تابعة لهذا الوسم. كيف؟ ... لنأخذ مثالا على ذلك لأوضح لك هذا 
المفهوم 

Netscape‏ الذي يعمل من خلاله 


Nablus, Palestine 
Please enter your address: 


حسناء لقد استخدمت الوسم <1 1۶> لتعريف هذا الشكل (هذه إتفقنا عليها مسبقا) ومن ثم قمت بإضافة الخاصية 
"٤‏ لهذا الوسم لتحديد نوع الشكل الذي أريده وأعطيتها القيمة 1٤×1‏ أي 


<FORM ...> 
<INPUT TYPE="text"> 
</FORM> 
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لينتج لدينا هذا الشكل: 


فقرة معترضة. 

إليك جمیع الأشكال (القيم) المستخدمة مع الخاصیية P۴٤‏ 1۷ 
وسوف آتركها الآن بدون تعليق لحين مناقشها لاحقا بشكل 
مفصل. مع ملاحظة أن هناك شكلين اخرين ندرجهما بالوسوم 
<TEXTAREA> ,<SELECT>‏ 


<INPUT TYPE="text"> 
<INPUT TYPE="password"> 


<INPUT TYPE="hidden"> 
1 <INPUT TYPE="radio"> 


<INPUT TYPE="checkbox">‏ ا 


Submit Query <INPUT TYPE="submit"> 
<INPUT TYPE="reset'"> 


<INPUT TYPE="button"> 


أرجو أن أكون قد وضحت لك الآن وظيفة الخاصية 1۲۲۴ وجميع القيم المستخدمة معها 
ونعود الان إلى مثالنا.. الخاصية التانية المستخدمة مع <1 >1N۴0‏ هي N۸۷٧٤‏ وتستخدم لتسمية حفل البيانات حيث 
قمت باعطاءِ الإسم address‏ لهذا الحقل في المثال. (لك كل الحرية في إعطاء الإسم الذي تریده للحقل). والحقيقة أن 
هذا الإسم يعرف الحقل في داخل النموذج نفسهء بحيث يمكن استخدامه فيما بعد للحاجات البرمجية وضرورات المعالجة 
إن وجدت من قبل البرامج التي قد تضيفها كمصمم للموقع. وحتى عندما تريد أن يُرسل النموذج إليك بالبريد فإن حقوله 
تعرّف بالاسم الذي أدرجته لها من خلال هذه الخاصية. (لاحظ ما قلثه سابقا عن تعريف أسماء الحقول عندما تحدثنا عن 
ئر مير والطرق لن کی با کرات مرد :رکا تر لا یک (کی اان) مایا کی لى كا لحل وص 
بادخال العنوان. 

<FORM ...> 


<INPUT TYPE="text" NAME="address"> 
</FORM> 


سل 


أما العبارة [٥4#‏ وكإ لله مر اام : فهي مجرد عبارة توضيحية أضفتها ليعرف الزائر ما الذي يجب عليه 
كتابته وتستطيع صياغة هذه العبارة كما تريد. ففي كل الأحوال ليس لها علاقة بجوهر النموذج نفسه بعكس الخاصية 
.NAME‏ 
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<FORM ...>‏ 


Please enter your address : <INPUT TYPE="text" NAME="address"> 
</FORM> 


Please enter your address : 


أما بالنسبة للعبارة الظاهرة داخل الحقل عدPa1st1 Nablus,‏ (أو أي عبارة أخرى تريدها) وهي بمتابة القيمة 
الإفتراضية التي تريدها للحقل» فبالإمكان إظهارها من خلال الخاصية ۷۸1۴. وهذه الخاصية تستخدم في الحالات 
التي نتوقع فيها كتابة قيمة دارجة أو متكررة من قبل معظم الزوار وللتسهيل عليهم يتم تعيينها كقيمة إفتراضية وبالطبع 
مع توفر إمكانية حذفها وكتابة ما يريدنه بدلا منها. 


<FORM ...> 
Please enter your address : <INPUT TYPE="text" NAME="address" VALUE="Nablus, Palestine"> 
</FORM> 


Nablus, Palest 
Please enter your address : 


قد نحتاج أحيانا إلى تحديد حجم الحقل ولذلك نستخدم الخاصية 51⁄۴ مع الرقم الذي نريده كحجم للحقل»ء لنجرب الرقم 
40 


<FORM ...> 
Please enter your address : <INPUT TYPE="text" NAME="address" VALUE="Nablus, Palestine" SIZE="40"> 
</FORM> 


Nablus, Palestine 
Please enter your address : 
أو لنجرب الرقم 10 أيضا‎ 
Nablus, Pal 
Please enter your address : 


لا يوجد للخاصية 517٤‏ أي صفة تحكمية بالنسبة لحجم المدخلات التي يمكن للزائر أن يكتبها داخل الحقل. وبعبارة 
أخرى: صحيح أننا حددنا حجم الحقل لكن ذلك يسري فقط على مظهره على الشاشة. ولا يوجد ما يمنع الزائر من 
الكتابة بحيث يتجاوز النص حجم الحقل المحدد. وهنا يأتي دور الخاصية ٤ N61۴8‏ ]×۱۸ لتتحكم بالحد الأقصیى 
للنص المدخل. 


<FORM ...> 

Please enter your address : <INPUT TYPE="text" NAME="address" VALUE="Nablus, Palestine" 
SIZE="40" MAXLENGTH="30"> 

</FORM> 


Nablus, Palestine 
Please enter your address : 
حاول الكتابة في هذا الحقل لأكثر من 30 حرفا وأنظر ماذا سيحدث?‎ 
فما رأيك بإجمالها مرة أخرى؟ حسناء هذه هي:‎ N۴101 إنتهينا الآن من خصائص الوسم‎ 


"۷P٤ ۰‏ : لتحديد نوع (شكل) حقل البيانات. 


91 


ت تحميل هذا الكتاب من موقع كتب الحاسب العربية wwWW. Cb4a. cO"‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


ME ۰‏ : لتعيين اسم لحقل البيانات. 
۰ 18ا۷ : لتعيين قيمة إفتراضية (مبدئية) لحقل البيانات. 

:S178 ۰‏ لتحديد حجم حقل البيانات. 

MAX LENGTH °‏ : لتعيين الحد الأقصى لعدد الحروف المدخلة في الحقل. 


النوع الثاني من الحقول المستخدمة في النماذج هو حقل ۷0۲Q«ءءهم‏ وهو يشبه الحقل ×6] من حيث الخصائص تماما 
غير أن مدخلاته تظهر على شكل ****** مهما كانت» وهو الفرق الوحيد بينهما. وربما تكون قد استنتجت الان أن 
هذا النوع من الحقول يستخدم عندما يوجد حاجة لإدخال كلمة سر من قبل الزائر في النموذج 
<FORM ...>‏ 
Please enter your name :‏ 
<INPUT TYPE="text" NAME="the name" VALUE="" SIZE="40" MAXLENGTH="30">‏ 
Please enter your passwod :‏ 


<INPUT TYPE="password" NAME="the password" VALUE="" SIZE="40" MAXLENGTH="30"> 
</FORM> 


Please enter your name : 
: Please enter your password 


لاحظ أنني لم أرغب في كتابة قيم إفتراضية ۷410٤8‏ للحقول» ولذلك تركتها فارغة وأستطيع أيضا أن ألغيها نهائيا. 
من الشيفرة. وأنا في هذا المثال أردت أن أوضح لك عدم أهمية كتابة قيمة إفتراضية للحقول في بعض الحالات. 


ت ان الى اع ات حن راع لون ره واا آي الل الى ٠‏ ركا فح من اة فين لن بير 
<FORM ...>‏ 


Please enter your name : 
<INPUT TYPE="text" NAME="the name" VALUE="" SIZE="40" MAXLENGTH="30"> 


<INPUT TYPE="hidden" NAME="my forms" VALUE="form1"> 


Please enter your passwod : 
<INPUT TYPE="password" NAME="the password" VALUE="" SIZE="40" MAXLENGTH="30"> 
</FORM> 


Please enter your name : 
: Please enter your passwod 


لاحظ هنا أن وجود هذا الحقل مثل عدمه بالنسبة لمظهر النموذج» وأن الزائر لن يتعامل معه بل وربما لن يعرف أن 
هناك حقلاً مخفياً. والسؤال هنا: ما الفائدة من وجود شىء مخفى لا إمكانية لاستخدامه؟ ولكى أجيب على هذا السؤال 
دعني أطرح لك مثالا أو حالة قد تواجهك كمصمم صفحات ويب... 
لنفرض أن لديك ثلاث صفحات تتضمن كل منها نموذجا ما وأن هذه النماذج متشابهة. وتحتوي على نفس الحقول. 
وعندما تصلك البيانات كيف ستستطيع تمييز أي من هذه النماذج استخدم لإرسال البيانات؟ بإمكانك إضافة هذا الحقل 
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في النموذج الأول . 


<INPUT TYPE="hidden" NAME="my forms" VALUE="form1"> 


<INPUT TYPE="hidden" NAME="my forms" VALUE=" form2"> 


في النموذج الثالث ... 


<INPUT TYPE="hidden" NAME="my forms" VALUE=" form3"> 


بذلك عندما تصلك البيانات المرسلة من قبل أي زائر استخدم أي من النماذج الثلاثة سيصلك أيضا حقل إضافي قمت 
ر e AO SE‏ يصت ۾ ,صاهي 
أنت نفسك بتعبئته سلفاً عندما صممت النموذج وذلك بأحد الأشكال التالية: 


my forms=form1‏ أو 
gl my forms=form2‏ 
my forms=form3‏ 


اسع اقرن ان اتل لني هر انهل مضه ون لزق ون كهت قحل ماخر ةة الس 
ويستخدم بهدف تعريف قيم ما سيتم إرسالها جنباً إلى جنب ضمن بيانات النموذج التي قام الزائر بتعبتتها 


ملاحظة مهمة بالنسبة للنماذج بشكل عام. من أجل إظهار النموذج بصورة مرتبة ومنسقة والتحكم بموقع الحقول فيه 
فمن الأفضل دائماً وضعه داخل جدول مع جعل الجدول بلا حدود. 


<FORM ...> 

<TABLE BORDER="0"> 

<TR> 

<TD>Please enter your name : </TD> 

<TD> 

<INPUT TYPE="text" NAME="the name" VALUE="" SIZE="40" MAXLENGTH="30"> 
</TD> 

</TR> 


<TR> 

<TD>Please enter your password :</TD> 

<TD> 

<INPUT TYPE="password" NAME="the password" VALUE="" SIZE="40" MAXLENGTH="30"> 
</TD> 

</TR> 

</TABLE> 

</FORM> 


وكما ترى تحتاج إلى القليل من العمل الإضافي لكنك بالمقابل ستحصل على النتيجة التالية 


Please enter your name : 
Please enter your password : 


هكذا أفضل... اليس كذلك؟ 
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الدرس الخامس عشر 
النماذج (2) 
وهو الدرس الثاني من درسين حول النماذج. لقد قمنا في الدرس السابق بمناقشة الوسوم الأساسية للنماذج وتعلمنا كيفية 
إدراج النماذج في صفحات الويب. كما قمنا بمناقشة بعض أشكال إدخال البيانات في النموذج وهي ,۴45۷0۲ '1ex{,‏ 


سوف نتابع الآن مع مجموعة من الأشكال الخاصة بالاختيار من متعدد وهي بالمناسبة ثلاثة أنواع: 0إلهR۸,‏ 
×0اCheck‏ وقائمة الإختیار 


نبدأً مع الشكل المسمى ۸۸510. ومن مسوغات استخدام هذا الشكل أن السؤال المطروح ينبغى أن يكون له إجابة 
واحدة فقط أو بعبارة أخرى على الزائر أن يختار إجابة واحدة فقط. 


وكمثال» لنفرض اني أريد أن أسأل الزائر عن المتصفح الذي يستخدمه (كما هو موجود في دفتر الزوار على شكل 
قائمة إختيار) لكن بدلا من أن يكون على شكل قائمة إختيار أريده أن يكون على شكل ۸۸510 وذلك بالشكل 
التالي:(أود أن أذكرك أن عناصر النموذج تظهر بشكل معكوس إذا كنت تستخدم 3.0 (Sindbad‏ 


Sindbad 3.0 
Sindbad 4.0 


Ms Explorer 3.0 
Ms Explorer 4.0 

فکیف ننشی ء مثل هذه القائمة؟ ... حسناًء لنبداً من الصفر ونعرٴف نموذجاً 
<FORM>‏ 


</FORM> 
>1N ثم لنقم بتعريف هذا الشكل» هل تذكر الوسم الخاص بذلك؟ إنه <1 ا۴‎ 


<FORM> 
<INPUT TYPE="radio"> 
</FORM> 


9 


<FORM> 
<INPUT TYPE="radio"> <BR> 
<INPUT TYPE="radio"> <BR> 
<INPUT TYPE="radio"> <BR> 
<INPUT TYPE="radio"> <BR> 
</FORM> 
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1 Û 


نحتاج الآن إلى تسمية هذه المدخلات»› أي أننا سنستخدم الخاصية NAME‏ معها. أما الاسم المعطى بحد ذاته فمن 
الأفضل أن يكون مرتبطا نوعا ما بموضوع السؤال» ليس لأن هذا ضروري للنموذج بل هو ضروري لك كشخص 
سيقوم باستقبال البيانات المرسلة من خلال النموذج» وبالتالي من الأفضل أن يوجد عنوان معبّر للبيانات بغرض التمييز. 
وبما أننا هنا نتحدث عن المتصفحات فلیكن هذا الاسم ھو se۲‏ W٥إط‏ 


<FORM> 
<INPUT TYPE="radio" NAME="browser"> <BR> 
<INPUT TYPE="radio" NAME="browser"> <BR> 
<INPUT TYPE="radio" NAME="browser"> <BR> 
<INPUT TYPE="radio" NAME="browser"> <BR> 
</FORM> 


وكما تلاحظ من النتيجة أن هذه التسمية هي ضمنية فقط ولا تؤثر على شكل النموذج (راجع الدرس السابق) لكن أي 
إختيار سيقوم به الزائر من هذه الأربعة خیارات سوف يصلك تحت الاسم .browser‏ 


الخطوة التالية هي إعطاء قيمة لكل مدخلة في هذه القائمة وذلك حسب ما نراه مناسباء إذن حان الوقت لاستخدام 
الخاصية :VALUE‏ 


<FORM> 
<INPUT TYPE="radio" NAME="browser" VALUE="Sind3"> <BR> 
<INPUT TYPE="radio" NAME="browser" VALUE="Sind4"> <BR> 
<INPUT TYPE="radio" NAME="browser" VALUE="Msie3"> <BR> 
<INPUT TYPE="radio" NAME="browser" VALUE="Msie4"> <BR> 
</FORM> 


وهنا أيضا نلاحظ أن لا تغيّر في شكل النموذج ظاهريا مع إضافة هذه الخاصية. لكن مع ذلك فقد قمنا حتى الآن بتسمية 
الحقول وإعطاء كل حقل قيمة محددة. وفعليا لقد إنتهينا من هذا النموذج. لكن بالطبع نحن لا نتوقع أن يكون الزائر 
لما بالغيب لكي يخمن أي من هذه الحقول تختص بكل قيمة. لذلك بقى علينا تعريف كل حفل باسم صريح يوضح 


محتواه. 
<FORM>‏ 
<INPUT TYPE="radio" NAME="browser" VALUE="Sind3"> Sindbad 3.0 <BR>‏ 
<INPUT TYPE="radio" NAME="browser" VALUE="Sind4"> Sindbad 4.0<BR>‏ 


95 


ت تحميل هذا الكتاب من موقع كتب الحاسب العربية wwWW. Cb4a. cO"‏ 
للمزيد من الكتب في جميع مجالات الحاسوب تفضلو بزيارتنا 


<INPUT TYPE="radio" NAME="browser" VALUE="Msie3"> MS Explorer 3.0<BR> 
<INPUT TYPE="radio" NAME="browser" VALUE="Msie4"> MS Explorer 4.0<BR> 
</FORM> 


Û Sindbad 3.0 

Û Sindbad 4.0 

Û MS Explorer 3.0 

Û MS Explorer 4.0 

وهناك خاصية تتعلق بهذا النوع من الحقول» وهي أنك إذا أردت أن يظهر أحدها وقد تم اختياره بشكل تلقائي فعليك 
باضافة الخاصية CHECKED‏ إليهء مع تراك کل الحرية للزائر فی اختیار ما يریده فیما بعل. 

<FORM> 

<INPUT TYPE="radio" NAME="browser" VALUE="Sind3"> Sindbad 3.0 <BR> 

<INPUT TYPE="radio" NAME="browser" VALUE="Sind4" CHECKED> 

Sindbad 4.0<BR> 

<INPUT TYPE="radio" NAME="browser" VALUE="Msie3"> MS Explorer 3.0<BR> 


<INPUT TYPE="radio" NAME="browser" VALUE="Msie4"> MS Explorer 4.0<BR> 
</FORM> 


ÛL Sindbad 3.0 
E Sindbad 4.0 
Û MS Explorer 3.0 
Û MS Explorer 4.0 


وهي بالشکل التالي: 


browser=Msie3 


نأتي الآن إلى الشكل الثاني من أشكال الإختيار من متعدد والذي يدعى ×80 1٤٤)‏ 0. ظاهريا لا يختلف هذا الشكل 
عن الشكل الذي سبقهء لكن عملي هناك اختلافات جذرية من حيث ١‏ لمفهوم والتعريف. وأنا أفضتّل أن نبقى على 
استخدامنا للمثال السابق حتى يسهل علينا تمييز الفروق. 


Sindbad 3.0 
Sindbad 4.0 
MS Explorer 3.0 


1T I 1 


MS Explorer 4.0 


قبل أن نستمر لو قتم بالنقر على أكثر من حقل في القائمة السابقة فإن باستطاعتك اختيار أكثر من حقل في نفس الوقت! 
وهذا هو الفرق الأول بین C1 E٤K80×‏ و ۸۸010 ففي ۸۸010 یمکن اختیار حقل واحد فقط لیس أكثر. 
لنقم الآن بتعريف هذه الحقول» وتسميتها بشكل مباشر ومن ثم سنعلق عليها: 
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<FORM> 
<INPUT TYPE="checkbox" NAME="Sind3" VALUE="Yes"> Sindbad 3.0 <BR> 
<INPUT TYPE="checkbox" NAME="Sind4" VALUE="Yes"> Sindbad 4.0 <BR> 
<INPUT TYPE="checkbox" NAME="Msie3" VALUE="Yes"> MS Explorer 3.0 <BR> 


<INPUT TYPE="checkbox" NAME="Msie4" VALUE="Yes"> MS Explorer 4.0 <BR> 
</FORM> 


ماذا تلاحظ؟ أو لا لقد أسندنا القيمة ×0طا)ءءطء للخاصية 1۷۴۴. ثم أعطينا لكل حقل في القائمة إسما مميزا في 


الخاصية N.۷٤‏ يختلف عن باقي الحقول. أما الخاصية ۷۸10٤‏ فأعطيناها قيمة موحدة لجميع الحقول. وبالطبع 
قمنا في النهاية بكتابة الأسماء التعريفية لكل حقل. 


في ۸۸510 نستطيع اختيار حقل واحد فقط أما في ×80 CH#ECK‏ 
فنختار أكثر من حقل» لذلك یستخدم عادة في الحالات التي 


يحتمل أن نحصل فيها على عدة أجوبة لنفس السؤال. 


في ۸۸510 تکون اها ا أما في 
CHECKBOX‏ فتکون الأسماء مختلفة والقيم موحدة 


ك متتل ات حا ركن أنه تم اخقار الحتن اتان وال انم توق تلك الج بالكل انال ٠‏ 
ض انه تم اختیار ني والرابع فسو 1 


Sind4=Yes 
Msie4=Yes 


كما نستطيع أيضا تعليم بعض الحقول بصورة تلقائية كما فعلنا مع ۸۸10 باستخدام نفس الخاصية CHECKED‏ 


<FORM> 

<INPUT TYPE="checkbox" NAME="Sind3" VALUE="Yes" CHECKED> 

Sindbad 3.0 <BR> 

<INPUT TYPE="checkbox" NAME="Sind4" VALUE="Yes"> Sindbad 4.0 <BR> 
<INPUT TYPE="checkbox" NAME="Msie3" VALUE="Yes" CHECKED> 

MS Explorer 3.0 <BR> 

<INPUT TYPE="checkbox" NAME="Msie4" VALUE="Yes"> MS Explorer 4.0 <BR> 
</FORM> 


< 


Sindbad 3.0 
Sindbad 4.0 


A i | 


MS Explorer 3.0 


- 


MS Explorer 4.0 


النوع التالث من أشكال الإختيار من متعدد هو قوائم الاختيار» وهذا النوع سوف يقودنا إلى وسوم جديدة من وسوم 
<SELECT>‏ 
<OPTION>‏ 


<OPTION> 
<OPTION> 
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</SELECT> 


بحيث أن <1 >SE1EC٥1/< ... > S81٤٣‏ تحددان بداية ونهاية القائمةء والوسم >0۴110N<‏ الذي يوضع دائما 
بينهما يستخدم لتحديد كل عنصر من عناصر القائمة. لنعد إلى مثالنا السابق لنرى كيف يمكن وضع الخيارات في قائمة 


<FORM> 

<SELECT> 
<OPTION> Sindbad 3.0 
<OPTION> Sindbad 4.0 
<OPTION> MS Explorer 3.0 
<OPTION> MS Explorer 4.0 

</SELECT> 

</FORM> 


وبذلك تكون النتيجة هي: 


Sindbad 3.0 چ‎ | 


وكالمعتاد لا يخلو الأمر من وجود خصائص تحدد طريقة عمل هذه الوسوم. وهناك خصائص مشتركة عرفناها في 
الآأشكال السابقة سيتم استخدامها هنا أيضا كما يوجد خصائص جديدة تتعلق فقط بهذا الشكل من حقول البيانات. فبالنسبة 
لِ >5٤] 8٣1<‏ يوجد الخاصية N۸١۷٤‏ وهي كما تعلم تحدد اسم القائمة. كما توجد الخاصية 517۴ التي تحدد 
حجم (أو بالأحرى) ارتفاع القائمةء وبالتالي عدد البيانات الظاهرة فيها. وهي تأخذ أي قيمة عددية صحيحة. 


<FORM> 
<SELECT NAME="þrowser" SIZE="2"> 
<OPTION> Sindbad 3.0 
<OPTION> Sindbad 4.0 
<OPTION> MS Explorer 3.0 
<OPTION> MS Explorer 4.0 
</SELECT> 
</FORM> 


Sindbad 3.0 ا‎ 
Sindbad 4.0 + 


وطالما بالإمكان عرض القائمة بأي ارتفاع نريد» وقد يصل إلى حد عرض جميع بيانات القائمة معاء فإن هناك إمكانية 
أيضا لجعل اختيار البيانات من هذه القائمة متعدداً وليس فقط قيمة واحدة» كيف؟؟ بإضافة الخاصية 0111۴1٤‏ 17. لنقم 
الآن بعرض جميع القيم (لدينا أربعة قيم» إذن القيمة المكتوبة مع S17۴‏ يجب أن تكون 4)» ومن تم لنتح المجال أمام 
الزائر لاختيار أكثر من قيمة واحدة في القائمة. 


<FORM> 
<SELECT NAME="þrowser" SIZE="4" MULTIPLE> 
<OPTION> Sindbad 3.0 
<OPTION> Sindbad 4.0 
<OPTION> MS Explorer 3.0 
<OPTION> MS Explorer 4.0 
</SELECT> 
</FORM> 
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Sindbad 3.0 
Sindbad 4.0 
MS Explorer 3.0 
MS Explorer 4.0 


لاحظ أنه لأداء عدة اختيارات يجب أن تقوم بالضغط على المفتاح ٠۲1‏ بصورة متواصلة أثناء عملية الإختيار. 


أما الخصائص المستخدمة مع الوسم >0۴110N<‏ فهي ۷۸10٤‏ والتي استخدمناها من قبل وسنستخدمها الآن 
لإعطاء قيمة لكل حقل بيانات في القائمة. وكذلك الخاصية 951٤٣1٤2‏ والتي نكتبها مع أي <۸ 0۴۲10> نريد أن 
يظهر وقد تم اختياره بصورة تلقائية. 


<FORM> 
<SELECT NAME="browser" SIZE="4" MULTIPLE> 
<OPTION VALUE="Sindbad 3.0"> Sindbad 3.0 
<OPTION VALUE="Sindbad 4.0" SELECTED> Sindbad 4.0 
<OPTION VALUE="MS Explorer 3.0"> MS Explorer 3.0 
<OPTION VALUE="MS Explorer 4.0"> MS Explorer 4.0 
</SELECT> 
</FORM> 


Sindbad 3.0 


Sindbad 4.0 
MS Explorer 3.0 
MS Explorer 4.0 


الشكل التالي من اشکال حقول البیانات یدعی 1٤×) ۲۸ R ۴٤۸‏ 


E 


وهو المستخدم عادة لكتابة التعليقات الحرة في النموذج ويتم إدراجه بكتابة الوسوم 
<TEXTAREA> ... </TEXTAREA>‏ 


هل تستطيع تخمين الخصائص المستخدمة معه؟ بالطبع لا بد من وجود الخاصية NAME‏ لإعطاءه اسم التعريف. لکن 
لا وجود للخاصية ۷410۴ » وبالمقابل فإن أي نص يكتب بين الوسمين سيتم عرضه داخل الحقل بصورة تلقائية 
<TEXTAREA NAME="comments">‏ 


Hello, please write your comments here :-) 
</TEXTAREA> 


Hello, please w rite your comme 


E 


كما توجد خصائص لتحديد مساحة هذا الحقل عرضا وارتفاعاًء وهي K018‏ التي تحدد العرض و ۸0۷8S‏ التي تحدد 
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<TEXTAREA NAME="comments" COLS="30" ROW S="6"> 
</TEXTAREA> 


۳ 


أما الخاصية الأخيرة هنا فهي 0۸4۴ التي تحدد طريقة إلتفاف النص المكتوب داخل الحقل (لا تعمل هذه الخاصية مع 
)MS Explorer 0‏ وهناك ثلاثة قيم تأخذها وهي على النحو التالي: 


1 : التي تعني أن النص سيلتف على عدة أسطر عند كتابته ولكنه سيصلك عند إرساله على شكل سطر واحد 
متتابع (حاول الكتابة داخل الحقول وأنظر كيفية تأثير هذه الخاصية على كل منها) 


<TEXTAREA NAME="comments" COLS="30" ROWS="6" WRAP="virtual"> 
</TEXTAREA> 


= 


1مم : تعني أن النص سيلتف على عدة أسطر وسيصلك أيضا على هذا النحو عند إرساله 


<TEXTAREA NAME="comments" COLS="30" ROWS="6" WRAP="physical"> 
</TEXTAREA> 


mM 
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#ه : تعني أن النص لن يلتف بصورة تلقائية على عدة أسطر لكنه على أية حال سيصلك بنفس الشكل الذي تم إدخاله 
به 


<TEXTAREA NAME="comments" COLS="30" ROW S="6" WRAP="off"> 
</TEXTAREA> 


12 
اھ 


حسناء بافتراض أننا إنتهينا من كتابة الشيفرة الخاصة بالنموذج وننتظر من أي زائر للموقع أن يملاه» والسؤال هو كيف 
يمكن له أن يرسله فعليا؟ نعود الآن إلى الوسم <01 >]N۴‏ وهذه المرة مع النوع ٤أ‏ طنء والتي ستقوم تلقائيا بإنشاء 
زر سيقوم عند النقر عليه بإرسال البيانات التي تم ملؤها في النموذج. 


<INPUT TYPE="submit"> 


Submit Query 


لاحظ أن اiصطSu‏ أو ( Submit Query‏ في ممapءءاهN)‏ ظاهرة على الزر وهي العبارة الإفتراضيةء فإذا أردت 
رها فك اا ال 0 ۷2 ا اقر ن 


<INPUT TYPE="submit" VALUE="Press here to send the form"> 


Press here to send the form 


في حالة كان زوار موقعك من النوعية المترددة من الناس والذين قد يغيرون آرائهم في آخر لحظةء يمكنك أن تتيح لهم 
إمكانية مسح ما كتبوه في النموذج وإلغاء الأمرء وذلك باستخدام ]٥٥)‏ کنو ع ۲۷۲۲۴۴٤‏ للوسم <1 >][NP€'‏ بنفس طریقة 


<INPUT TYPE="reset" VALUE="Forget about it"> 


Forget about it 


والذي يقوم بإنشاء زر ١0)ااط>‏ هو N۴101‏ [الشكل الأخير من أشكال البيانات في النماذج والمدرج مع الوسم < 
ضمن النموذج» وهو مرتبط بالنماذج التي تحتوي على نصوص برمجية (أو برامج مكتملة) من لغات متقدمة مثل 
اة كونه يستخدم لتشغيل هذه البرامج وإطلاقها. وطبعا هناك طرق معينة لربطها مع البرامج وليس هنا 
المجال لطرحها. لكن مبدئيا أقول إن طريقة الإدراج والتعريف هي ذاتها المستخدمة مع S101)‏ ,أمكعا. 


<INPUT TYPE="button" VALUE="This is a sample button"> 
وأخيرآً ... وصلنا الآن إلى نهاية حديثنا عن النماذج. فما رأيك؟ هل هو من المواضيع السهلة أم الصعبة؟ لا شيء سهل‎ 


في بدايته. لذلك من الأفضل لك أن تحاول دائما التدرب أولا بأول على الوسوم المشروحةء بل والعودة إلى الدروس 
السابقة إذا اقتضى الأمر وخاصة إذا تداخلت بعضها مع الدروس الأحدث. 
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الدرس السادس عشر 
المتصفحات والوسوم الخاصة 


تاشن هذا احا من المر اشيم اة والشاتكة. و المزججة رعا ما فى هذه اة وقي مجال تصميم قات 
الويب عموماً. وهو موصو ع الوسوم الخاصة... فما هي هذه الوسوم؟ ... حسناً» إليك القصة:- 


هل سبق لك و أن صادفٽ عبر ة Best Viewed with MS gi Best Viewed with Netscape Navigator‏ 
gÎ Explorer Internet‏ (أفضل مشاهدة بو اسطة المتصفح نيتسكيب E.‏ إكسبلورر) عند زيارتك لبعض مواقع 
الإنترنت? حتما لقد شاهدت مثل هذه العبارات تذيل الكثير من المواقع. والحقيقة أن مصممي هذه المواقع ليسوا 
اوران اعون و الل اق بد ر لن عرو ا لكن بكل بساطة ربما 
قاموا بتضمیين د بعض الوسوم أو الخصائص التي يدعمها ذلك المتصفح فقط في صفحاتهم. ٠‏ بحيٿ إذا قام زائر ما 
بالسكرل إلى ذلك الموتع مستخدما متصفحا آخر غير الموصى به فلن يشاهد نفس النتيجة التي يشاهدها زائر آخر 
يستخدم المتصفح المطلوب. (طبعا لا أستطيع أن أعمم هذا لأن هناك العديد من المصممين الذين يفضلون فعلاً متصفحا 
عن غيره سواءًَ قاموا بتضمين الوسوم الخاصة به أم لا) 


تھ بو هتاك الد من السرم ف تة 1141 التي قامت الغركات النتجة اتقات كداكروسرفت فشكي 
بتطوير ها بحيث تعمل على متصفحها الخاص دون غيره من المتصفحات ءھ4" Browser Specific‏ (من قال لك أن 
الشركات الكبرى تتعامل مع بعضها البعض كالكبار). وقد يصل الأمر أحيانا إلى وجود وسوم موحدة تدعمها جميع 
ا وکر ف ره هي الي ر ا ر ها دف ارت ارام د اله 
عن القوائم. فقد شاهدنا كيف أن كلا المتصفحین يدعمان الوسم <> والخاصیة ۲۲۴۴ لکنھما یختلفان على القیم 
لت ترج فحفما: هذا مال و لح فط على هذا الإختلاف: 


وأكثر من ذلك» لا ننسى أن شركات البرامج تقوم بشكل مستمر بعمليات التحديث والتحسين لبرامجها وإطلاق إصدارات 
جديدة لها بين الحين والآخرء لذلك من غير المستبعد أن يختلف الدعم للوسوم والخصائص من قبل نفس المتصفح 
بإصداراته المختلفةء وبالتالي اختلاف مظهر الصفحات. وهذه المسألة بالذات (وأعني اختلاف مظهر الصفحات) هي ما 
تسبب أرقا لمصممي صفحات الويب. والسؤال الملح دوما لديهم هو: كيف أحصل على صفحة ويب لا تختلف في 
عرضها من متصفح لآخر؟ وقد يكون جوابه أكثر إلحاحاء إذ يكون من الصعب أحيانا تحقيق هذا الهدف. وتزداد 
صعوبته كلما ازدادت العناصر والتنسيقات المختلفة التي تحتويها الصفحة. بينما يسهل التحكم في صفحة تقتصر 
محتوياتها على النصوص فقط ويكون من الممكن إخراجها بنفس الطريقة في جميع المتصفحات. 


فما الحل إذن؟ 


مع أن بعض هذه الوسوم الخاصة تعطي تأثيرات رائعة للصفحة»ء وتضفي عليها مظهراً جميلا. لكنك بالمقابل لا تضمن 
أن جميع زوار موقعك يستخدمون نفس المتصفح» فهذا مستحيل بالطبع. لذلك لا أقول لك لا تستخدم هذه الوسوم لكن 
حاول قدر الإمكان تجنبها إذا أردت أن تظهر صفحتك بنفس الطريقة التي تريدها لجميع الزوار. كذلك حاول دائما 
استعراض صفحاتك باستخدام المتصفحين وباستبانات مختلفة للشاشة فهذا يعطيك فكرة مبدئية عن الطريقة التي 
سشاهها بها ززارك لى مخف المت فحات: 


أنا هنا أتحدث عن الصفحات الإنجليزية القياسية عموماء أما الصفحات العربية فهى حكاية أخرى 
لأن الدعم الموجود للغة العربية في المتصفحات ليس قياسيا نتيجة لعدة أسباب لا مجال لذكرها في 
هذا المقام. فمثلا متصفح نيتسكيب لا يدعمها أصلا ويحتاج إلى برنامج إضافي «اعں آ۴ من شركة 
صخر وهو سندباد. وهناك متصفح اخر يدعم العديد من اللغات العالمية بما فيها العربية» وهو 
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تانجو من شركة أليس. لكن أنا شخصيا أفضل مايكروسوفت إكسبلورر ليس من ناحية استخدامي 
من غيره من المتصفحات. 


قبل أن نبدأً باستعراض الوسوم لا بد لي من التنويه بأني استخدم برنامجي Sindbad 3.x‏ ڪ Ms Internet Explorer‏ 
×.3 وعندما أتحدث عن الوسوم والخصائص وتوافقها مع المتصفحات فأنا أعني هذين المتصفحين وأعني رقم الإصدار 
أيضا (×.3). وذلك لأنهما لا زالا الأكثر رواجا (حتى تاريخ كتابة هذا الدرس)» سواء بیننا كمستخدمين عرب أو بشکل 
عام بين مستخدمي الإنترنت عالمياً. . ومن المحتمل إذا كنت تستخدم إصداراً أحدث لأحد هذه البرامج أن تلاحظ أنه قد 
أصبح يدعم الوسوم الخاصة بالبرنامج الآخر (و هذا بالطبع لڍ ليس ذنبي» بل ذنب أولئك الذين يطورون برامجهم بشكل 
6ے ومففر غو ر کا قفد فا سن کل ادال و خن وعلى أية حال إذا كنت ممن يقبلون النصيحة المجانيةء 
حاول دائما تصميم صفحاتك مع افتراض أسوأ الإحتمالات أي واضعا نصب عينيك أن زوار موقعك يستخدمون 
متصفحات قديمة. وبذلك تضمن أن معظمهم إن لم يكن جميعهم سيشاهدون موقعك بنفس الصورة وبدون أي مشاكل 
تتعلق بالتوافقية بين المتصفحات والوسوم. 


وبالنسبة لطريقة عرض الوسوم لهذا الدرس» فنظرا لخصوصيتها سوف أتبع هنا منهجا مختلفا عن الدروس السابقة يقوم 
على عرض الوسوم الخاصة بكل متصفح في صفحة منفصلة. وذلك بهدف حصر الوسوم المخصصة لكل متصفح وعدم 
تداخلها مع الوسوم الأخرى. وبالتالي تجنب احتمال حدوث خلل في بنية الصفحات عند عرضها من خلال متصفح لا 
IG Ta‏ الخاصة بها. 

لكن هذا لا يعني عدم قدرتك على مشاهدة الصفحة الخاصة بوسوم أحد المتصفحات إذا كنت تستخدم الاخر. بالطبع 
سوف يكون بإمكانك مشاهدة النص المكتوب والشيفرات المستخدمة كالمعتاد (فنحن في النهاية لا زلنا نستخدم لغة 
-ا41M)‏ لكن كل ما هنالك أنه لن يكون بإمكانك مشاهدة تأثيرها إلا إذا استخدمت المتصفح المناسب. 
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الوسوم الخاصة 
Navigator Netscape‏ 


ملاحظة مهمة: تحتوي هذه الصفحة على وسوم خاصة بالمتصفح ×.3 Netscape N4۷1g20۲‏ فإذا كان متصفحك خلاف ذلك 
فلن تستطيع مشاهدة الصفحة بالصورة المناسبة 


ه٠‏ نص وامض >BL1INK>‏ 
مه اأاأعمدة متعددة <MULTICOL>‏ 
٠‏ أصوات موسيقية ومقاطع فيدير >EM 8٤2<‏ 


</BLINK> ... <BLINK> 


ضع أي نص تريده بين هذين الوسمين و سوف تشاهده يومض أمامك على الشاشة 
<BLINK>H.P in arabic </BLINK>‏ 


H.P in arabic 
</MULTICOL> ...<MULTICOL> 


للصحفيين فقط... هل تريد أن يظهر النص في صفحانك مقسما إلى عدة أعمدة كما هو الحال في الجرائد والمجلات؟ 
هذا ما توفره لك هذه الوسوم. فلك أن تحدد عدد الأعمدة التي تريدها ومن ثم مقدار المسافة الفارغة التي تفصل بين كل 
عمود والعمود الذي يجاوره وكذلك العرض الذي تشغله الأعمدة ككل. 
لنجرب وضع فقرة في عمودين. وسوف نستخدم لهذا الغرض الخاصية K018S‏ لتقوم بتحديد عدد الأعمدة المطلوبة 
<MULTICOL COLS="2">‏ 
OUR PARAGRAPH |S HERE‏ 


</IMULTICOL> 
لتحديد المسافة الفاصلة بين كل عمود وآخر بالبيكسل.‎ 60١۲۴8۸ والآن سنستخدم الخاصية‎ 


<MULTICOL COLS="2" GUTTER="70"> 
OUR PARAGRAPH IS HERE 
</IMULTICOL> 

لا تتوفر الإمكانية في هذه الوسوم لتحديد عرض كل عمود على حدة لكن بالمقابل نستطيع تحديد عرض جميع الأعمدة 


تبعاً لعرض نافذة المتصفح. والخاصية التي تؤدي هذا الغرض هي WIDTH‏ . 


سأوضح لك هذه الخاصية من خلال المثالين التاليين: ساقوم أولا بتحديد عرض النص بالقيمة الثابتة 500 ثم استخدام 
قيمة نسبية هي %60 
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<MULTICOL COLS="2" GUTTER="70" WIDTH="500"> 
OUR PARAGRAPH IS HERE 


</IMULTICOL> 


<MULTICOL COLS="2" GUTTER="70" WIDTH="60%"> 
OUR PARAGRAPH IS HERE 


<IMULTICOL> 


<EMBED> 


ıڏpe Netscape‏ هذا رڪ ٠» >85MB8 ۴٤2<‏ والذي يستخدم عموما لإدراج ملفات الملتيميديا في صفحات الويب سواء 
كانت مقاطع موسيقية أو ملفات فيديو . لکن يشترط هنا وجود برامج إضافية مشعَلة لهذه الملفات تدعی .Plugins‏ یتم 
إلحاقها ب ٥م4ءءه‏ لأنه لا يحتوي أصلا إلا على بعض المشغلات المدمجة فيه بينما يفتقر إلى مشغلات أخرى. 
(لمعرفة المشغلات المثبتة في برنامجك أكتب كدمذعدآم:اuهطه‏ في المستطيل الخاص بالعناوين في متصفحك ثم أضغط 
Enter‏ أو اختر الأمر اط۸ ءد1-عںا۴ من قائمة م1ه1]) وعادة يتم الحصول على هذه المشغلات من الإنترنت. 
كذلك يحفل موقع شركة ءمهءءاه بالعديد من هذه المشغلات أو على الأقل الوصلات التشعبية التي تقودك إليها. 
— 

- 
OIOMHOIOIS‏ 
إن المشغل المدمج الخاص بملفات 4 هو الذي أظهر الصورة الموجودة في الأعلى والتي تستخدم من أجل التحكم في 
الملف الصوتي. والحقيقة أنه يوجد لكل مشغل شاشة التحكم الخاصة به والتي تظهر بصورة شبيهة لما تراه الآن. 


من الخصائص المستخدمة مع هذا الوسم ما يلي : 
:5R€‏ لتحديد مصدر الملف المراد تشغيله 
<EMBED SRC="onceupon.mid">‏ 


لاحظ أن شاشة التحكم قد ظهرت بشكل مشوه» فهي مجرد صورة مقصوصة. ونحن نعرف أننا نستطيع التحكم بحجم 
الصور من خلال الخصائصض HEIGHT, WIDTH‏ إذن... 


<EMBED SRC="onceupon.mid" WIDTH="145" HEIGHT ="61"> 


"0A1‏ 4: تحدد ما إذا كان الملف سيتم تشغيله تلقائيا عند تحميل الصفحة. وتأخذ القيم ٠#‏ للتشغيل التلقائي 
(كما فى هذه الصفحة) و ذا لم التشخل» وهي القمة الإفثر اضية. وكا ترىئ تظهر في هذه الحالة شاشة ادكه 


والخاصية الأخيرة هي 100۴ التي تحدد إذا كان الملف سيتم عرضه بشكل متكرر أم لا وتأخذ القيم .)٣u٥, [e‏ 
لاحظ أن لا إمكانية هنا لتحديد عدد مرات التكرار كما توفره الوسوم الخاصة ب .MS Explorer‏ 
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الوسوم الخاصة 1 


Internet Explorer MS 


ملاحظة مهمة: تحتوي هذه الصفحة على وسوم خاصة بالمتصفح MS ]ntعإnعا ٤×10۲٥۴۲‏ فإذا كان متصفحك خلاف ذلك فلن 
تستطیع مشاهدة الصفحة بالصورة المناسبة 


>BGSOUND> ةيقwوم أصوات‎ 
<MARQUEE> ٽlتill‎ 


<BGSOUND> 


تستطيع تعيین أي ملف صوتي يحمل الإمتداد ۵ص أو ۷جس أو 1 بحيث يعمل تلقائياً عندما يتم تحميل الصفحة في 
المتصفح» وذلك باستخدام الوسم <0Nلا86S0>‏ (أي )Back Ground Sound‏ فعلی سبیل المٹالء قمت بإدراج 
مقطع والمسمى 04101.٣14‏ بالطريقة التالية 


<BGSOUND SRC="baladi.mid"> 


إذن هناك الخاصية 98٥‏ والتي تستخدم كما ترى لتحديد اسم الملف المدرج. كما يوجد أيضا الخاصية 100۶ التي 
تحدد عدد مرات تكرار عزف المقطوعة أي أنها تأخذ أرقاما صحيحة عادة. أما لو قمت بإعطاءها القيمة 1- أو القيمة 
ئiوا‏ ا فهذا سوف يؤدي إلى تكرار عزف المقطوعة إلى ما لا نهاية (لا تخف» فهذا لا يعني أن العزف سيستمر بعد 
أن تقوم بإطفاء جهازك) فقط سوف تسمعها طالما أنك موجود في الصفحة وسيتوقف بمجرد انتقالك لصفحة أخرى أو 
خروجك من البرنامج. 


<BGSOUND SRC="baladi.mid" LOOP="infinite"> 
<BGSOUND SRC="baladi.mid" LOOP="3"> 


أما في حالة أردت إدراج وصلات تشعبية لملفات صوتية في موقعك بحيث يمكن للزائر أن يحملها أو أن ينقر عليها إذا 
أراد سماعهاء فذلك يتم بالطريقة الإعتيادية لإدراج الوصلات والتي تعلمناها في الدرس السادس أي كما يلي: 


<A HREF="baladi.mid"> ... </A> 
وهي -كما تعلم- طريقة عامة ليس لها علاقة بنو ع المتصفح المستخدم‎ 
One Man's Dream Upon A Time Once 


</MARQUEE> ... <MARQUEE> 
تصن يتحر ك من النعة ال السا‎ 


ما رأيك بهذا النص المتسكع أمامك على الشاشة؟ جميل ..أليس كذلك؟ هذه اللافتة (إن جاز التعبير) هي إحدى المؤثرات 
الخاصة التي يمكن إحداثها في ١١إ10م×8‏ 18. بواسطة هذه الوسوم. وبكل بساطة هذه هي الشيفرة الخاصة بذلك 


<MARQUEE> 
H.P in arabic 
<IMARQUEE> 
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بالطبع لا يمكن أن تمر الأمور هنا ببساطة فلا بد من وجود خصائص لهذه الوسوم» والحقيقة أن هناك إحدى عشرة 
خاصية نستخدمها (عدد ليس بالقليل بالنسبة لوسوم خاصة). لكنها على أية حال ليست صعبة التطبيق بل إننا تعاملنا 
بشكل أو بآخر معها مسبقا وخاصة مع الوسم <6 1۷> وهذه هي الخصائص أسردها لك مع الأمثلة: 


:B6)0 0R‏ لتحديد لون الخلفية 


<MARQUEE BGCOLOR="#FFOO0O0O0"> 
H.P in arabic 
<IMARQUEE> 


:HE]GHT‏ لتحديد إرتفاع اللافتة إما أن تأخذ قيمة ثابتة أو قيمة نسبية حسب إرتفاع نافذة المتصفح. 
رنفاع وهي إما ان و إرنفاع 


<MARQUEE BGCOLOR="#FFO000" HEIGHT ="80"> 
H.P in arabic 
</IMARQUEE> 


1۳8[ : لتحديد عرض اللافتة» وهنا أيضا إما أن تأخذ قيمة ثابتة أو نسبية 


<MARQUEE BGCOLOR="#FFOOO0O" HEIGHT ="80" WIDTH="40%"> 
H.P in arabic 
<IMARQUEE> 


6١۷‏ : لتحديد المحاذاة العمودية للنص الذي قد يتواجد على جانبي اللافتةء وهي تأخذ القيم مال كذ ,مه و 
ا0ط وهي الإفتراضية أي التي تطبق تلقائيا عند عدم إدراج هذه الخاصية. 


Welcome to 

<MARQUEE BGCOLOR="#FFO0000" HEIGHT ="80" WIDTH="40%"> 
H.P in arabic 

<IMARQUEE> 

Have a good time. 


.good time Have a Welcome to 


Welcome to 

<MARQUEE BGCOLOR="#FFOO000" HEIGHT ="80" WIDTH="40%" ALIGN="middle"> 
H.P in arabic 

</IMARQUEE> 

Have a good time. 


.Have a good time Welcome to 
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Welcome to 

<MARQUEE BGCOLOR="#FFO000" HEIGHT="80" WIDTH="40%" ALIGN="top"> 
H.P in arabic 

</IMARQUEE> 

Have a good time. 


.Have a good time Welcome to 


:۴A ٣)٤‏ لتحديد المسافة الفارغة التي تفصل بين اللافتة وبين النص الموجود على جانبيها 


Welcome to 

<MARQUEE BGCOLOR="#FFO000" HEIGHT ="80" WIDTH="40%" HSPACE="30"> 
H.P in arabic 

</IMARQUEE> 

Have a good time. 


.Have a good time Welcome to 


:۷SPA٣)٤‏ تعمل مثل الخاصية السابقة لكنها تحدد المسافة الفارغة عمودياً من الأعلى والأسفل 


حتى الآن كانت الخصائص التي ناقشناها مجرد خصائص مظهرية تتعلق بشكل ومظهر اللافتة دون تغيير طريقة 
عملها. والآن نأتي إلى الخصائص الفنية: 
BEHA 0R‏ تحدد سلوك النص الموجود في اللافتة وطريقة عمله وهناك ثلاثة قيم (أو بالأحرى) ثلاثة أساليب 
لحركة النص وهي التالية: 
ه٠‏ 0ءء يتحرك بنفس الإتجاه من جانب إلى آخر وبصورة مستمرة وهي القيمة الإفتراضية»ء لذلك لا يهم إن 
کتبت أم لا. 
ه٠‏ لاء يتحرك النص مرة واحدة من جانب إلى الجانب الآخر ويتوقف عنده. 


<MARQUEE BGCOLOR="#FFO000" WIDTH="80%" BEHAVIOR="slide"> 
H.P in arabic 
<IMARQUEE> 


من المحتمل أن يكون النص في المثال أعلاه متوقفا بعد أن يكون قد أكمل تحركه»ء لذلك قم بالنقر على زر 
Refs‏ الموجود في متصفحك لإعادة تحميل الصفحة وتحريك النص مرة أخرى 


٠‏ terna)eاه‏ يتأرجح النص جيئة وذهابا من جانب إلى آخر. 
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<MARQUEE BGCOLOR="#FFOOOO" WIDTH="80%" BEHAVIOR="alternate">‏ 


H.P in arabic 
<IMARQUEE> 


RECN‏ تحدد إتجاه سير النص وذلك من خلال القيم 1٥۲‏ التي تحركه إلى اليسار (وهي الإفتراضية) و عا 


التي تحركه إلى اليمين. 
<MARQUEE BGCOLOR="#FFO000" WIDTH="80%" DIRECTION="right">‏ 
H.P in arabic‏ 
<IMARQUEE>‏ 


100P‏ تحدد عدد المرات التي سيتحرك فيها النص داخل اللافتة. فإذا أردت أن تستمر الحركة إلى ما لا نهاية فضع 
القيمة 1- أو ماگ1 وبخلاف ذلك ضع عدد المرات التي تريدها. والشيفرة التالية تحدد عدد مرات الحركة بثلاث. 
(إذا وجدت النص ساكنا أو لم تجد نصا على الإطلاق فهذا يعني أنه قد استنفذ حركاته التلات لذلك تحتاج للنقر على 

Refresh‏ لإعادة تشغیله) 


<MARQUEE BGCOLOR="#FFO000" WIDTH="80%" DIRECTION="right" LOOP="3"> 
H.P in arabic 
<IMARQUEE> 


بقي لدينا الآن خاصيتين تقومان بتحديد سرعة تحرك اللص في اللافتة وقبل أن نناقشهما دعني أروي لك هذه الة أقصة: 


في غابر الأزمان» حدثنا أستاذ الفيزياء يا سادة يا كرام» أن الأفلام المتحركة ما هي إلا مجموعة من الصور التابتة أو 
اللقطات التي يتم عرضها بصورة متعاقبة خلال فترة زمنية معينةء مما يعطي الإنطباع بوجود الحركة. وسرعة عرض 
اللقطات وتعاقبها هو ما يحدد سرعة الحركة للفيلم. فمثلاً مشهد السيارة المسرعة هو مجرد مجموعة من الصور الثابتة 
لهذه السيارة في مواقع مختلفة على الشاشة. وبما أن لافتاتنا هي شكل من أشكال الأفلام المتحركة فإن هذا المبدأ يسري 
عليها أيضا... إلى هنا وانتهت القصة! 


والآن إليك الخصائص: 
:SCROLLAMOUNT‏ هذه الخاصية تحدد المسافة بين كل لقطة وأخرى للنص وهي تأخذ قيما عددية صحيحة تحدد 
المسافة المقطوعة بالبيكسل (أعرف أنها صعبة قليلاً لكن لا بأس سأوضحها بالأمتلة). 
<MARQUEE SCROLLAMOUNT="1"> HTML </MARQUEE>‏ 
<MARQUEE SCROLLAMOUNT="50"> HTML </MARQUEE>‏ 
<MARQUEE SCROLLAMOUNT="100"> HTML </MARQUEE>‏ 


<MARQUEE SCROLLAMOUNT="200"> HTML </MARQUEE> 
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في الحالة الأولى فإن المسافة التي تقطعها كلمة ا11 في كل حركة لها هي 1 بيكسل. أما في المثال الثاني فالمسافة 
هي 50 بيكسل أي أن الكلمة تقفز 50 بيكسل في كل خطوة (أو لقطة) بما يساوي 50 ضعفا عن المتال السابق وهذا ما 
يعطي الإنطباع بالسرعة» وهكذا الأمر للمثالين اللاحقين وهما 100 و 200 بيكسل على التوالي. 


:SCR0 [DEY‏ لكي نحدد الزمن الذي يستغرقه النص في القفز بين كل خطوة وأخرى نستخدم هذه الخاصيةء 
والقيمة المعطاه مع هذه الخاصية تمثل الزمن بالميلي ثانية (0.001 من الثانية) 
سوف أستخدم نفس الأمثلة السابقة مع هذه الخاصية لنقارن بين النتائج في الحالتين: 
<MARQUEE SCROLLAMOUNT="1" SCROLLDELAY="500"> HTML </MARQUEE>‏ 
<MARQUEE SCROLLAMOUNT="50" SCROLLDELAY="500"> HTML </MARQUEE>‏ 
<MARQUEE SCROLLAMOUNT="100" SCROLLDELAY="500"> HTML </MARQUEE>‏ 


<MARQUEE SCROLLAMOUNT="200" SCROLLDELAY="500"> HTML </MARQUEE> 


لقد أسندت القيمة 500 لهذه الخاصية في جميع الأمثلة وهي تعني أن هناك فترة نصف ثانية (بالتمام والكمال) تفصل 
بين كل خطوة وأخرى للكلمة. وبالمناسبةء قد تضطر للإنتظار دهراً كاملا لكي ترى النص في المثال الاأول. 


ما رأيك الآن لو نلغي الخاصية 3S €ROLLAMOÛUNT‏ لنری کیف تعمل 58C8R0٥©L1L5 ٤|۸۷‏ لوحدھا 


<MARQUEE SCROLLDELAY="500"> HTML </MARQUEE> 
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2 الوسوم الخاصة‎ 
Internet Explorer MS 


>...805 ¥< خلفية ثابتة وهوامش علوية وجانبية‎ ٠ 
<IFRAME> ةaڌle إطار ات‎ 0 


<BODY/> ...<BODY> 


هل تعتقد أن هذه وسوما جديدة أو خاصة تختلف عن تلك التي نعرفها؟! من الواضح أنها ليست بالوسوم الجديدة» بل 
هي نفسها التي تحدثنا عنها سابقا ومنذ الدرس الأول. وكل ما هنالك هو أننا سنتعرف على خصائص جديدة لها تختص 
فقط ب ۲١10۲م×8‏ 18. ولو بدأت فعلاً في تطبيق الخاصية الأولى لها وهي تدعى ...86۴R۸ 0° ٤R 11٤8S‏ فإنك لو 
قمت بالنقر على شريط التمرير الجانبي للمتصفح» وأثناء ذلك دققت النظر في خلفية الصفحة ستلاحظ شيئا مخظلفا؟؟ إن 
الخلفية ثابتة بينما النص فقط ومحتويات الصفحة هي التي نتحرك فقط. 


توضع هذه الخاصية مع الوسم <5۷ 80> وتقوم بتثبيت خلفية الصفحة كما رأيناء وهي تأخذ دائما القيمة ۴1×٤5‏ أي 
أن الشيفرة عموماً تكون 
<BODY BGPROPERTIES="fixed"> ... </BODY>‏ 


في أغلب الأحوال»ء وعندما نريد التحكم بهوامش الصفحة نقوم باستخدام طرق وحيل معينة لأداء هذه المهمة. مثلاً قد 
نستخدم <8> و <۴> لإضافة أسطر كما لو كانت هوامش علوية وسفلية للصفحة. كما قد نستخدم 
L0 €KQ UOTE -< ... > BLOCKQUOTE>‏ 8> وهي وسوم الفقرات المقتبسة لإضافة هوامش جانبية للصفحة أو 
نستخدم الجداول ê‏ إلخ. لکن يوفر MS Explorer‏ هذا الف والدوران من خلال د عمه للخصائص التالية في وسم 
<BODY>‏ 


:LE۴|MARGN‏ التي تحدد الهامش الأيسر لكل الصفحة 
PMARGN‏ 0" : التي تحدد الهامش العلوي 


<BODY LEF TMARGIN="50" TOPMARGIN="50"> ... </BODY> 


<IFRAME> ... </IFRAME> 


من الإمكانيات الرائعة المتوفرة في 11M‏ ویدعمھا e۲إoام»Ex MS‏ الإطارات العائمة .Floating Frames‏ كما 
تعلم لقد تعرفنا على الإطارات بشكل عام في الدروس 9 10ء 11 وتعرفنا على الإمكانيات التي يوفرها هذه النوع من 
طرق عرض صفحات الويب. وقلنا إن إدراج صفحات الإطارات يتطلب وجود ملف رئيسي جنبا إلى جنب مع الملفات 
العادية ... إلخ. أما في الإطارات العائمة فالحكاية أبسط بكثير فهي مجرد عناصر تدرج داخل الصفحات متلها مثل أي 
عناصر أخرى كالصور»› ومن ثم نقوم بتحديد الملف الذي نرید عرضه داخل الإطار بالإضافة إلى بعض الخصائص 
التى قد نحتاجها. هذا كل ما هنالك! 

ولنبداً بالوسوم الأساسية للإطارات العائمة 
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<IFRAME> Here, there is a floating frame </IFRAME> 
وهي بحالتها هذه عديمة الفاعلية ولن ينتج عنها أي شيء سوى حجز مساحة فارغة ضمن الصفحة ستخصص لهذا‎ 
الإطار. و يوجد هناك عبارة مكتوبة داخل الوسوم فماذا بشأنها؟ الحقيقة أن هذه العبارة وضعت بحيث تظهر کبدیل عن‎ 
الإطار في حالة تم عرضه من خلال متصفح لا يدعم الإطارات العائمة. إذن تستطيع رؤية هذه العبارة إذا كنت تستخدم‎ 
في مقابل عدم رؤيتك للإطار (حظا أوفر).‎ 
ننتقل مباشرة إلى الخصائص فهي بيت القصيد.‎ 


<IFRAME SRC="thissite.html"> 
Here, there is a floating frame 
</IFRAME> 


:WD 1H, HEIGHT‏ تحددان مساحة الإطار عرضا وارتفاعا وكالعادة يتم ذلك باستخدام القيم المطلقة أو النسبية 


<IFRAME SRC="thissite.html" WIDTH="70%" HEIGHT ="200">‏ 
Here, there is a floating frame‏ 
</IFRAME>‏ 
:SCROLLING‏ تحدد إذا ردنا إضافة أشرطة التمرير الموجوده عل جانب أو أسفل الإطار ام لا وتأخذ القيم yes‏ 
(الإفتراضية) أو 1۸0 
<IFRAME SRC="thissite.html" WIDTH="70%" HEIGHT="200" SCROLLING="no">‏ 
Here, there is a floating frame‏ 
</IFRAME>‏ 
:۴R۴RAMEBORDER‏ تحدد ظهور أو عدم ظهور الحدود ثلاثية الأبعاد حول الإطار وتأخذ القيم 1 (الإفتراضية) و 0 
التي تعني لا حدودل. 
<IFRAME SRC="thissite.html" WIDTH="70%" HEIGHT="200" SCROLLING="no" FRAMEBORDER="0">‏ 
Here, there is a floating frame‏ 
</IFRAME>‏ 
:٤‏ من خلال هذه الخاصية نقوم بإسناد اسم للإطار لكي نقوم باستخدامه من قبل الوصلات التشعبية التي نريد 
استهداف الإطار بها. (راجع الدرس الحادى عشر حول هذا الموضوع) 
<IFRAME SRC="thissite.html" WIDTH="70%" HEIGHT="200" NAME="myframe">‏ 
Here, there is a floating frame‏ 
</IFRAME>‏ 
لقد قمت بتسميته ٠۲4۳ر..‏ والآن إذا درجت وصلة تشعبية للصفحة الرئيسية -مقدمة في إتش.تي.أم. أل- بالشكل 


التالى: 
</A<‏ مقدمة في إتضش.تي .İم.JÎ <A HREF="htmintro.html" TARGET ="myframe">‏ 


فإن النقر عليها يؤدي إلى تحميل الصفحة داخل هذا الإطار 
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الدرس السابع عشر 
الويب واللغة العربية 


سندخل من خلال هذا الدرس إلى أحد المواضيع الهامة التي يُعنى بها كل من يريد أن يكون للغة العربية وجود على 
الإنترنت. سنقوم بمناقشة الكيفية التي يمكن لنا كمستخدمين عرب إنشاء صفحات ويب بلغتنا على هذه الشبكة العالمية. 


فذلكة تاريخية 


نحن نعرف أن بدايات اللغة العربية على الإنترنت اقتصرت على أسلوب قد نعتبره الآن بدائياء لكن لا نستطيع إنكار 
فعاليته في ذلك الوقت. (لا تعتمد كثيرآ على عبار ة "في ذلك الوقت' فمن المحتمل أن يكون هناك مواقع لا زالت تعتمد 
هذا الأسلوب لعرض محتوياتها حتى هذه اللحظة)» وهو أسلوب النص المصور. أي النص المسحوب على جهاز 
اScanne‏ والمعروض على الإنترنت كصورة. وكانت هذه هي الطريقة التي تفذ منها أصحاب المواقع المعربة للدخول 
إلى عالم الإنترنت. لكن من الواضح أنها لم تكن بالطريقة الفعالة أو العمليةء لعدة أسباب أهمها: 

بالنسبة للمصمم: كانت عملية إنشاء الصفحة تعني كتابتها وتتسيقها وطباعتها ومن ثم مسحها على إع”صهء؟ فإذا أراد 
فيما بعد إجراء أي عملية تعديل مهما كانت بسيطة فذلك يعني إعادة تحريرها وسحبهاء مكلفة في ذلك الوقت والجهد 
e‏ ي ي 

أما بالشسبة للزائر فذلك يعتى إضاعة وقت أطول فى عرض هذه التصورصض -الضور- أضعافا مضاعفة مما لو كانت 
نقنوضا بحتة. مالإضافة إلى اسكطالة اجر اع عملبات البحت العقادة سواء كانت خار جيه من خلال محر كات بحت 
الإنترنت» أو داخلية ضمن الصفحة نفسها من خلال أمر البحث الموجود في المتصفح. وأحياناً قد يواجه مشكلة رداءة 
الصورة وبالتالي عدم إمكانية إخراجها بشكل واضح وسليم على الطابعة. 


لكن دعنا لا نلم هؤلاء الرواد الذين اتبعوا هذه الطريقة. فكما يقال (مكره أخاك لا بطل) وعذرهم هو عدم وجود 
متصفحات تستطيع عرض النصوص العربية بطريقة صحيحة. إلى أن قامت شركة صخر بإطلاق متصفحها سندباد 
الذي جاء معربا ل ممهءءاه× وشركة مایکروسوفت التي أطلقت ۲٥۲٥1م×E N8 ٣٤٥٣۸۵۲‏ ليكونا فاتحة خير 
بالنسبة لنا كمستخدمين عرب للإنترنت» ولا نستطيع إلا أن نكن لهما كل التقدير. فهانحن كما ترى نبحر في الإنترنت 
ولغتنا العربية تزداد انتشاراً فيها يوماً بعد يوم. 


خا ا تفن دا نك ج لى اعات م ر أ مال ع رس إفذفة غر عا ها تة صن جات 
ر ا ا عر وار حه عاف عن ت و د 
ولن يكون هناك إلا وسم جديد واحد سيتم التعرض له بشكل مقتضب بما يهمنا في موضوع اللغة العربية هنا على أن 


ولنبداً ألان::: 
لنقم بداية بتعريف صفحة ويب عادية كما إعتدنا: 


<HTML> 
<HEAD> 
<TITLE> ... </TITLE> 
</HEAD> 


<BODY> 


</BODY> 
<IHTML> 
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ومن ثم سنقوم بإضافة هذه الشيفرة لها 
<META HTTP-EQUIV="Content-Type" CONTENT ="text/html; charset=windows-1256">‏ 


وذلك في القسم الأعلى أي ضمن الوسمين <5 384> ... <۳42 83/> ويفضل أن تكتبها بعد وسوم العنوان 
</TITLE> ... <TITLE>‏ 
<HTML>‏ 
<HEAD>‏ 
<TITLE> ... </TITLE>‏ 


<META HTTP-EQUIV="Content-Type" CONTENT ="text/html; charset=windows-1256 "> 
</HEAD> 


<BODY> 


</BODY> 
<IHTML> 


قم بكتابة هذه الشيفرة كما هي نصا وحرفا. وما يعنينا فيها الآن هي العبارة 
charset=windows-1256‏ 


فهي لب موضوعنا. أما باقي الشيفرة فسوف نقوم بمناقشتها إن شاء الله في درس لاحق عند الحديث عن الوسوم 
المتقدمة. 


فما الذي تعنيه العبارة السابقة؟؟ بإختصار شديد» هي تحدد قائمة الترميز العربية ءعه۴ ٥04٥‏ التي سيتم عرض 
صفحتنا من خلالها. أو لنقل أنها تحدد أسلوب التشفير الذي سيستخدمه المتصفح لعرض الأحرف. 


حسناء يبدو أننا سنعود ثانية للفذلكة التاريخية. وهذه المرة إلى بدايات اللغة العربية مع الحاسوب الشخصي نفسه وليس 
إذا كنت من مستخدمي الحاسوب القدامى ... وبالتحديد من أيام نظام التشغيل (08S‏ وتطبيقاته (أي قبل أن يكون هناك 
برنامج ويندوز المعرآب) فلا بد أنك تعرف» وربما تعاملت مع برامج التعريب القديمة التي واكبت تلك الفترة كبرنامج 
النافذة وريم ونظم صخر ... إلخ. حيث أنه في تلك الفترة كانت هناك عدة جهات أخذت على عاتقها مهمة تعريب 
الحاسوب وأنظمة تشغيله. لكن المشكلة كانت في في غياب التنسيق بين هذه الجهات. وكانت النتيجة هي إصدار 
العشرات من برامج التعريب التي تختلف عن بعضها البعض في طريقة ترتيب قائمة الرموز والحروف وبالتالي اختلف 
أسلوب تشفير النصوص وعرضها. بمعنى أن النص المكتوب من خلال برنامج "النافذة" سوف يبدو كمجموعة من 
الحروف والكلمات المبهمة وكأنها مكتوبة بلغة أخرى باستخدام برنامج آخر متل اريم"'. 


ولتوضيح الفكرة السابقة (على الأقل كما أفهمها أنا!!!) إليك هذا المثال. 
لنفرض أن هناك قائمة ترميز رثبت فيها الحروف بالشكل التالي: 


ي و| هھ ن م ل ك ق ف غ ع ظ طا| ض ص ش ساز را ذ| دخ ح ج| ث ات | با 
وأننا أردنا كتابة كلمة 'سندباد" من خلالها... 


: بال تیب التا‎ oe ۰ ن إل“ أننا قمنا با 0 ات ۱ ةَ با 2 ۱ ر 1 : يتعامل قائمة يه‎ o Mh 
نم لنفرض الان ستعراض الكلمة باستخدام برنامج مع ترميز مختلفة وبالترتي ي‎ 
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بالمقارنة بين النظامين سوف نشاهد أن كلمة 'سندباد" في النطام الأول قد أصبحت 'ضظفجدف"!!! في النظام الثاني 


ي| و| هالإ م إل كق ف غ ع ظط ضا ص شا ز ار ذ ا8خ ح ج ثت تا 
راواإذز 8B‏ ش | س|ي بال اإتان مك ط ذا صثن FB‏ غ ع دخ¿z INI‏ 


إن كعد نظ التشفير لم يكن لالح الستخد العربى آبدة لذ أتها أرشعقه في إشكالات أظها عنم الترافق بين ااتطبيقات 
التي يتم العمل عليها. ولا شك أن ظهور نظام ويندوز وانتشاره بين المستخدمين العرب بصورة كبيرة قد حد من هذه 
المشكلة بشكل فغال. 


والآن عودة إلى الإنترنت... لقد ألقت المشكلة سالفة الذكر بظلالها على نظم إنترنت ومتصفحاتها المعرأبة (وان کان 
ذلك بصورة آقل تأثيراً عمّا سبق). لذلك تجد أن من الميزات التي تحرص شركات صخر وميكروسوفت على إضافتها 
للمتصفحات هي ميزة تعدد قوائم الترميز التي يستطيع المتصفح دعمها. ومن الأمثلة على هذه القوائم: -ئ Widow‏ 
008-0 ,1256, 150-8859-6 و أكثر ها استخداماً وانتشاراً هى 1256-0WSل,1.‏ وعادة تملك المتصفحات 
القدرة على اكتشاف قائمة الترميز المطبقة على الصفحة بصورة تلقائية. لكن من الحكمة أن نقوم نحن دائما بتحديد هذه 
القائمة ليس بسبب قلة الثقة في المتصفحات وإنما من باب الإحتياط الواجب دائما في عالم الإنترنت وتصميم 
الصفحات... 

إذن» هل عرفت الآن السبب في إضافة الشيفرة 1256-ء0wل,1ساءعء٣هطء‏ إلى بداية الصفحة؟ 


لكن ماذا سيحدث لو دخلت إلى إحدى الصفحات ولم تكن تتضمن الشيفرة الخاصة بقائمة الترميز؟ حسناء هناك إحتمال 


من إثنين: إما أن يكون المتصفح قد اكتشفها بصورة تلقائية واستخدم الإعدادات الإفتراضية وبالتالي تم عرض الصفحة 
بالشكل الصحيح وبذلك حت المشكلة قبل أن تبدأ. أو تستطیع أنت أن تحل المشكلة بنفسك › كيف؟؟ إليك الطريقة: 


في المتصفح MS‏ ١١۲ه1م×8‏ تجد أيقونة صغيرة في الزاوية اليمنى السفلى لنافذة المتصفح. فإذا قمت بالنقر عليها 
ستظهر قائمة بأسماء قوائم الترميز التي يدعمها. 


Western Yindoms-1 252] 
e Arabic ndoms-1 ADE] 
Arabic [D15-F20)] 
Arabiz [|5 1-B853-6] 


وما عليك الآن إلا أن تختار القائمة التي تعتقد أنها المناسبة وإذا أخطأت قم باختیار قائمة أخرى وهكذا. 


أما في برنامج سندباد فتستطيع أداء هذه المهمة باختيار الأمر "خيارات صفحة الويب الحالية" من قائمة 'خيارات سندباد' 
حيث يظهر بضمنها صندوق حوار خاص بقوائم الترميز. 


وبالمناسبة» هل أخبرتك أن باستطاعتك رؤية النص العربي حتى لو كنت تستخدم متصفحا غير معرب؟ كيف ذلك؟! كل 
ما عليك فعله هو تغيير إعدادات الخطوط الإفتراضية في المتصفح واختيار خطوط عربية بدلا من الخطوط المحددة 
أصل. هذه هى الحكاية فقط لكنها ليست الحل!!. إذ سرعان ما ستكتشف أن النص غير مرتب والأسطر والفقرات 
متداخلة بطريقة غير منطقية خاصة إذا احتوت الصفحة على كلمات أجنبية. فعلى سبيل المثال إذا كانت هناك كلمة 
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أجنبية في منتصف أحد الأسطر فسوف تلاحظ أن الكلمات التي تليها على اليسار قد أصبحت على اليمين والعكس 
صحيح. وبذلك سيكون من الصعب عليك متابعة هذه الفقرات. (وعلى أية حال لو كان هذا هو الحل لما وجدنا شركات 
مثل صخر وميكروسوفت تضيعان وقتهما في إيجاد متصفحات معربة). إذن الحل السابق هو مجرد حل مؤقت لمشكلة 
ظهور النص العربي فقط ولكنه لم يحل أبدا مشكلة كون اللغتين العربية والإنجليزية تكتبان بإتجاهين مختلفين وبشكل 
يحتاج إلى حل جذري بإيجاد المتصفحات المعربة ثنائية الإتجol .(BiDi) gyi Bi-Directioral‏ 


O Ty‏ ات و اا 
إکسبلورر:- 


في الدرس الرابع تطرقنا إلى وسم الفقرات <۴>. وقلنا أن إحدى خصائص هذا الوسم هي الخاصية 1۸( التي تحدد 
إتجاه النص من خلال القيم ۲۲1 و .1(١‏ (وقد طلبت منك أن تبقى متذكراً لها لأننا سنتطرق إليها عند الحديث عن اللغة 
العربية.) إذن لقد حان الوقت!!. يدعم إكسبلورر هذه الخاصية بشكل كبير» ذلك لأن من ميزاته أنه لا يتعامل مع 
الصفحة والفقرات المكونة لها كوحدة واحدة بل أنه يتعامل مع كل فقرة على حدة. ويتطلب هذا أن تقوم بتكرار 
الإعدادات التي تريدها مع كل فقرة بحد ذاتها. 


A O TR TTT EDET 
<P DIR="rtI" ALIGN="right"> ... </P> 
وأن كل فقرة إنجليزية محاطة بالوسوم‎ 
<P DIR="ltr" ALIGN="left"> ... </P> 


وذلك ليس لسبب إلا لضمان ظهورها بالشكل المناسب في المتصفح إكسبلورر. ولاحظ أنني في الحالتين أقوم بتحديد 
تا لصن جا إلى جف م المحاااة لار زفي الحلف ان مذة الكاصه ادا تكم اش قط مم ور 


ناي الآن إلى المتصفح سندباد... کما تعلم فان هذا المتصفح هو برنامج مضاف Plugin‏ لتعريب المتصفح Netscape‏ 
بإصدار اته المختلفة. لذلك من البديهي أن يرث خصائصه المختلفةء إبتداءاً من الواجهة التطبيقية للبرنامج وإنتهاءاً 
بالوسوم الخاصة التي يدعمها. لذلاك فعند الحديث عن أحدهما نستطیع القول بأننا نتحدث عن الآخر بدون أدنى اختلاف. 


ما يهمنا في هذا المقام هو أن سندباد يتعامل مع الصفحة التي يعرضها كوحدة واحدةء وذلك على خلاف إكسبلورر. 
بمعنى أنه لا يدعم الخاصية 21۸. لذلك نرى أن سندباد يحتوي على زر خاص بتحويل إتجاه الصفحة يمينا أو يسارآء 
وهو الزر الموجود في أعلى نافذته ويكون على شكل سهم. 


إذن بشكل عام» طالما كانت الصفحة موحدة اللغة (سواءاً كانت هذه اللغة عربية أو إنجليزية) وبالتالي كانت تحتوي على 
فقرات موحدة الإتجاه (يمينا أو يسارا) فمن غير الضروري أن نقوم بتحديد المحاذاة لكل فقرة على حدة»ء فالأصل أن 
نقوم بذلك من خلال زر تحديد الإتجاه. لكن عندما تحتوي صفحتنا العربية على فقرة إنجليزية (أو العكس) فهنا لا بد من 
استخدام وسم الفقرات وتحديد المحاذاة المطلوبة لهذه الفقرة فقطء ومن ثم المتابعة مع باقي الفقرات العربية بشكل طبيعي 
كالسابق. ونكرر العملية مع أي فقرة إنجليزية لاحقة. وهنا عند الضغط على زر تحديد الإتجاه ستجد أنه يغير إتجاه 
جميع الفقرات فالعربية ستحول إلى اليسار والإنجليزية إلى اليمين والعكس بالعكس. 
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السؤال الآن» أي من الطرق نستخدمها في صفحاتنا؟ هل نعتمد على الخاصية التي يدعمها إكسبلورر أو على الزر الذي 


يتضمنه سندباد؟ 


الجواب عموما هو أن نتبع الطريقة التي تضمن أكبر قدر من التوافق في مظهر الصفحات فوجود الخاصية 1R‏ لن 
N ET‏ لكن غيابها هو ما سيجعل إكسبلورر هزيلا. إذن لنستخدمها دائماً ومع كل فقرة من 


خلاصة القول أضعها في النقاط التاليةء وكما يقال: في الإعادة إفادة! 


1. في بداية الصفحة ضع الشيفرة التالية كما هي نصاً وحرفاً 


<META HTTP-EQUIV="Content-T ype" CONTENT ="text/html; charset=windows- 
1256"> 


2. قم باحاطة كل فقرة عربية من فقرات صفحتك بالوسوم التالية: 
<P DIR="rtI" ALIGN="right"> ... </P>‏ 
3 إذا أردت إدراج فقرات إنجليزية فقم بإحاطة كل منها بالوسوم 
<P DIR="ltr" ALIGN="left"> ... </P>‏ 


4. تستطيع استخدام الوسوم السابقة مع الجداول أيضاً 


في الأيام الأولى لإنشاء هذا الموقع» وبالذات في الدرس الأول» واجهت إشكالا معيناً وذلك عندما كنت أقوم بكتابة بعض 
المصطلحات الإنجليزية وبضمنها رموز خاصة أو أرقام. فقد كانت هذه الرموز تظهر بصورة معكوسة عندما يتم 
عرضها في المتصفح سندباد. مثال ذلك: أن الإشارة / الموجودة في وسوم النهاية كانت تظهر في آخر الوسم (أي إلى 
اليمين) بدلا من أن تظهر في بدايته. كذلك عند الحديث عن الرموز الخاصة كالفراغات كانت إشارة (&) تظهر على 
اليسار وإشارة (:) تظهر على اليمين» أي انهما تظهران بشكل معاكس لما يجب أن يكونا عليه. 


وبصراحة مطلقة فقد سببت لي هذه المشكلة كابوسا على مدى عدة أيام متلاحقةء حاولت خلالها تجربة العديد من 
الحلول. كان من ضمنها أن أقوم بكتابة هذه الرموز بصورة معاكسة علها تعود إلى رشدها. لكن للسخرية كانت في 
الحالة المعكوسة تبقى كما هي في مكانها. وأخيرآً جاء الحل السحري بعد أن أرسلت إلى شركة صخر أستفسر عن هذه 
المشكلة. وكان هذا الحل بكتابة رمز يسمى 0×۴2 وهو رمز الفراغ باللاتيني» وتتم كتابته بالضغط على المفتاح 
1 في لوحة المفاتيح مع الأرقام (من اليسار إلى اليمين) 0253 وذلك قبل أي رمز 'مشاغب" لا يظهر في مكانه 
الصحيح. وبذلك تم حل كل الإشكالات التي واجهتها مع هذه الرموز. 


إذن ا ستطيع الآن أن أضيف نقطة خامسة إلى النقاط السابقة: 
استخدم ۸1.1+0253 قبل الرموز أو الحروف الإنجليزية التي لا تظهر في مكانها الصحيح عند عرضها من 
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خلال المتصفحات 


الدرس الثامن عشر 
وسوم ۲۸ء ومحركات البحث 


من المحتمل أن يكون عنوان هذا الدرس غريبا بعض الشيء بالنسبة لك. وأنه قد أثار لديك بعض التساؤلات عن فحوى 
دلومو ون لدف من کا التریسں کل عاو کے ل تطرل سار ل دی ا کہا لك کیا لے“ 


لقد تابعنا معا من خلال الدروس السابقة مفردات لغة M[‏ 1 خطوة بخطوة. ومن المحتمل أنك قمت بتطبيق هذه 
الدروس بصورة عملية من خلال صفحات وهمية قمت أنت بإنشائها. (حسنا فعلت!!! - لأنه من الصعب استيعاب أي 
موضو ع جديد دون القيام بالتطبيق العملي له» وخصوصا في مجال الكمبيوتر عموما ولغاته بشکل خاص). والان أنت 
تنفد أنه خان لقت للمل الذي فبك فكزة لمرضرع ماء وتريدطرحها على الإنتر نتر آل تكن اء مرقمك 
الخاص لتعرض هذا الموضوع من خلاله. وتؤمن أن هذه الدروس التي تتابعها في هذا الموقع قد كوّنت لديك المعرفة 
الكافية للقيام بتصميم موقعك بنفسك (كما أتمنى). .. وبذلك تجد نفسك جاهزآً للانطلاق في رحاب الإنترنت ولتقول بكل 
فخر: 'لدي موقع على الإنترنت"' . لكنك أيضا قد تتوقف لتفكر للحظات. .. فأنت تعرف والجميع يعرف أنه يوجد في 
الإنترنت حاليا الملايين من المواقع! وربما تتساعل: كيف لي أن أنشئ موقعي في هذا الخضم الهائل من المواقع؟! 
وكيف للناس أن يجدوا طريقهم إلى هذه الزاوية الصغيرة التي أنشأتها في هذا الكيان اللامحدود؟ وإذا كنت من النوع 
المتشائم فربما ستتراجع عن هذه الفكرة (فكرة الموقع) قبل أن تبدأها... حسناء لا أريدك أن تشعر بالإحباط. فالطبع لو 
وکا کو رع من اء مرت ر ت خان و ار ھا ا رت کل مد ران اا ارت 
الإنترنت أصلأء اليس كذلكف؟ 


في بدايات الإنترنت» كانت هناك عبارة دارجة تقول 
Build it, and they will come‏ 


أي أنشيء موقعك» وسوف ياأتون اليه. ولا أعرف إلى أي مدى کان صدق هذه العبارة في تلك الأيام. فانا لا أستطيع 
تخيل أي موقع على الويب تهل إليه جحافل الزوار بمجرد افتتاحه مهما كانت طبيعة هذا الموقع أو موضوعه أو 
التقنيات المستخدمه فيه. لكن ما أعرفه حاليا أن تسويق الموقع في متاهات الويب يعد من أهم وأصعب المهمات التي 
تواجه أصحابه. بل وربما أصعب من عملية إنشاء الموقع نفسها. 


السؤال الآن ... ما هي الطريقة المثلى للوصول إلى شيء ما عندما تحتاجه في الإنترنت؟ والجواب بديهي» إنها 
محرکات البحث. لذلك لا نبالغ إذا قلنا أن الموقع الذي يدرج في محركات البلحث وبالذات في الصفحات الأولى منها 


وفي أعلى مستويات هذه الصفحات هو موقع ناجح يستطيع أن يضمن وصول أكبر عدد من الزوار إليه. 

إذن فمحركات البحث هي الخطوة الأولى 
لكن كيف نصل أصلا إلى محركات البحث هذه؟ (وأعني هنا كيف نتوصل إلى إدراج موقعنا في قوائم هذه المحركات؟) 
وهو ما سنحاول الإجابة عليه في هذا الدرس. 


حسنا... قد تقول: نحن هنا نناقش لغة 111 فما دخل محركات البحث بهذا الموضوع؟ بالطبع فإن الهدف من هذا 
الدرس هو إكمال ما بدأناه في الدروس السابقة حول لغة ا١۳‏ أي أننا سوف نناقش وسوما جديدة لهذه اللغة. لكن 
بما أن هذه الوسوم تتعلق بمحركات البحث. فقد وجدت أنه من المحتم توضيح العديد من النقاط حول هذه المحركات. 
وعلى أية حال فالمزيد من المعرفة لن يضر أحدا. 
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إذن فما ستجده هنا في هذا الدرس لن يكون فقط وسوم ا١1[‏ بل أيضا بعض المعلومات والأفكار حول محركات 
البحث» ولن يعنينا هنا كيفية استخدامها للبحث بل ما سيعنينا هو كيفية إدراج المواقع ضمنها... أي أنك لن تكون هنا 
باحتا عن المعلومة» بل ستكون ناشرآ لها. وأتمنى أن تكون هذه الأفكار عونا لك على ذلك. 


كيف لك أن تجعل الناس يأتون إلى موقعك» وأن يجدوا طريقهم إليه 


بسهولة ويسر؟ وبشكل أعمٌ ... كيف تستطيع أن تسوّق موقعك؟؟؟ 
هذا هو السؤال 


هنا لن أتكلم معك في أمور بديهية وأقول لك إن الفكرة الموجودة في موقعك والموضوع المطروح فيه لهما أثر واضح 
في جذب الزوار إليه. ولن أقول لك بأن طريقة تنظيمه وتنسيقه تسهل عليهم التجول فيه» وبالتالي لن يجدوا صعوبة في 
إيجاد ما يبحثون عنه. كذلك لن أذكرك بأن التجديد المستمر لمحتوياته يجعل زوارك يحرصون على العودة مرة بعد 
مرة... طبعا لن أقول لك كل ذلك!!!! 


لا أعرف مدى استخدامك لمحركات البحث للوصول إلى ما تريده في الإنترنت! ولا أعرف أيضا إن كان استخدامها قد 
أثار لديك بعض التساؤلات! على سبيل المثال: 


ما الفرق Altavista gy Yahoo jı‏ 
. ما السبب في تباين النتائج التي تظهر من موقع لآخر من حيث العدد والمحتوى؟ 
لماذا يوجد وصلات تشعبية لا تعمل في بعض المحركات أكثر من غيرها؟ 


عند الحديث عن مواقع البحث في الإنترنت» من الضروري أن نميز بين محركات البحث من جهة والفهارس (أو أدلة 
ال و کے اعرا رلك فن حت انور ر اتماص وارك الل 


Search Engines محركات البح‎ 


يعتبر محرك ۸1)۷1 من أوضح الأمثلة على محركات البحث. وهي تسمى أيضا بالزواحف ؟إ16 س4إ أو 
العناكب ١۲لم؟‏ ومرد هذه التسميات إلى الطريقة التي يتبعها المحرك لإيجاد المواقع وتصنيفها حيث تقوم 
الروبوتات الخاصة به (برامج خاصة بالبحث وتتميز بالذكاء ...الإصطناعي طبعا) بالزحف في الإنترنت بحث 
عن المواقع الجديدة وعندما تجد أحدها تقوم بفهرسة وتصنيف كل كلمة من الكلمات الموجودة في صفحات هذا 
الموقع ضمن قاعدة البيانات الهائلة الخاصة بالمحرك» حيث تستخدم هذه البيانات لتكوّن نتائج البحث التي 
يطرحها زوار المحرك فيما بعد. وتقوم الروبوتات أيضا من حين لآخر بإعادة زيارة المواقع السابقة بعد مدة قد 
تطول أو تقصر (أسبوع أو شهر) تبعا لطبيعة المواقع نفسها وعدد الزوار اليوميين وكبر الحجم وذلك بهدف 
تحديث المعلومات عن هذه المواقع وإعادة تصنيف أي إضافات أو إلغاءات طرأت عليها. وكل ذلك يجرى 
بصورة أتوماتيكية من خلال هذه الروبوتات. ونستطيع القول أن التصنيفات الموجودة في متل هذه المحركات 
تكون إلى حد ما حديثة. 


الفهارس أو أدلة البحث Directories‏ 


ولعل من أبرز الأمثلة عليها هو الفهرس 0٥10ه۲‏ وفي هذا النوع من طرق البحث يتم تصنيف المواقع ضمن 
قوائم متدرجة ومتشعبة عن بعضها البعض بحيث يبدأ بالمفتاح الأساسي العام ثم يتدرج إلى الأكثر تحديدا 
وهكذا. ويقوم بعملية التصنيف هذه طاقم يعمل خصيصا في البحث عن المواقع. (أي طاقم بشري» وذلك على 
خلاف المحركات) كما يعتمد على المعلومات التي يقوم أصحاب المواقع بإرسالها إلى الفهرس عندما يقومون 
بتحميل المعلومات الخاصة بموقعهم إليه. لذلك نجد أن كمية المعلومات المصنفة في الأدلة أقل منها في 

تر كات الخ و احا اقل كا 
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ولكي أوضح لك الفرق بين كلا الموقعين إليك المثال العملي التالي: 


عندما قمت بالبحث عن المواقع الخاصة بمدينتي نابلس باستخدام ۷210١‏ كانت نتيجة البحث ثلاثة مواقع فقطء وكانت 
م عن فع ينلدي م د مو و 
1 النتاء : < 1 ۴ ٍ : 


Regional: Regions: Middle East: Countries and Regions: Palestinian Authority: Cities and Regions: Nablus 


وکما تری فإن تسلسل البحث انتقل من 21صە¡عع‌R‏ إلى R10”‏ إلى ٤ئ٤‏ eالكM¡i‏ وهكذا نزول إلى أن وصل إلى 
ان 


محدد. والحقيقة أن هناك صفحات في نفس الموقع تكرر ظهورها ضمن نتائج البحث» والسبب في ذلك فقط لأن كلمة 
وطبعا كما تلاحظ فإن هناك فرقا شاسعا بين النتائج التي تم الحصول عليها ومرده كما أسلفت إلى طريقة العمل 
والتصنيف المتبعة في كل من المحركين. 


والآن لنبداً حديشا عن وسوم ١۴1۲۸‏ فما هي هذه الوسوم ؟؟؟ 

باختصار شديد» هي وسوم تدر ج ضمن صفحات الويب» وبالتحديد في أعلاها وضمن المقطع <5 >1٤۸‏ .. 

<842 3/> وتستخدم لوصف الصفحة أو الموقع بشكل عام» من حيث المحتويات والكلمات الرئيسية أو المفتاحية 
والمؤلف وغيرها من المعلومات التي قد نعتبرها توثيقية. كما أنها تفيد في عملية التصنيف التي تجرى من قبل محركات 
البحث. (ولاحظ أئي قلت محركات البحث ولم أقل أدلة البحث) فالحقيقة أن محركات البحث Altavista, Hotbot, Jia‏ 
)ەعءماnا‏ هي التي تستفيد فقط من هذه الوسوم وتلجأ إليها في عملية تصنيف الموقع ولا تستفيد منها الأدلة. أي أن 
0 ل يتعامل معها أبداً. ومع ذلك فإن نشرك لصفحاتك على الإنترنت دون وضع هذه الوسوم ضمنها يعتبر إغفالا 
لجانب مهم من جوانب إنشاء المواقع على الويب. ولكن . .. (عادة عندما تظهر 'لكن' ' في منتصف الحديث» فإن هناك 
أخبارآ غير سارة فى » الطريق) لا تعتبر هذه الوسوم حلا سحريا لمسالة محركات البحث» > صحيح أنها تزيد من إحتمالات 
إدراج موقعك في هذه المحركات» وأنها تساعد المحركات على تصنيف صفحاتك بالطريقة التي تراها أنت مناسبة. لکن 
سيبقى أمامك خطوات أخرى لإكمال هذه المهمة. 


لقد حان الوقت للثكلم بلغة ...H1 M1‏ و أبداً بالقول إن الوسم >1۴E1۲۸<‏ ھو وسم مفرد. وهو يأخذ الخصائص التالية: 


HTTP-EQUIV 

تعتبر هذه الخاصية مكافئة <1845> الذى يعرف الصفحة ككل. (والحقيقة أن اسمها يدل ذلك 
تعتبر سم اي ر ت 

وبدون الدخول في تفاصيل جانبيةء نستطيع أن نقول أنها تحدد خصائص الصفحة ككل. 


وإذا كانت لديك ذاكرة قوية فسوف تدراك أننا قمنا بالفعل باستخدام هذه الوسوم مسبقا!! وكان ذلك في الدرس 
السابق عندما حددنا صفحة الترميز العربية التي سيتم عرض الصفحة من خلالها وكان ذلك بالشكل التالي: 


<META HTTP-EQUIV="Content-Type" CONTENT ="text/html; charset=windows-1256"> 


NAME 
نقوم من خلال هذه الخاصية بتحديد اسم (أو لنقل عنوان) وحدة البيانات التي نريد تعيين قيمها‎ 
CONTENT 
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تحدد المحتويات أو البيانات التي نريد إسنادها للخاصيتين السابقتين 

في واقع الأمر فإن لهذه الخصائص الكثير من القيم. لكنها بكل بساطة لا تعنينا في شيء»ء فمعظم هذه القيم توصف بأنها 
Server‏ أي یتم التعامل معھا على مستوی المزود ولیس على مستوى جهاز المستخدم S1٥‏ ٤۸م1ا€‏ ولا تھم 
مصممي صفحات بسطاء مثلنا. وما يعنينا بالدرجة الأولى هي القيم التالية: 


...HTTP-EQU1V مع الخاصية‎ ٠ 
والتي تعني نوعية المحتويات. وأذكرك مرة أخرى أننا تعاملنا معها مسبقا ... ثم‎ ٥٥١1١٤-18 القيمة‎ 
قمنا بتحديد طبيعة هذه المحتويات على أنها 1ط/ا×ه) أي نصوص لغة‎ 0٥١٥١٤ باستخدام الخاصية‎ 
ا11 وأن صفحة ترميزها هي ۷1140۷5-1256 ...ولن نحتاج أكثر من ذلك مع هذه الخاصية.‎ 
نستخدم‎ ....۸ ۷٤ مع الخاصية‎ ٠ه‎ 
ه القيمة ل0۲ سرع لتحديد الكلمات المفتاحية للصفحة.‎ 


<META NAME="keywords" ... > 


تم نستخدم الخاصية ٥٠١٥١۲‏ لتحديد هذه الكلمات. وعلى سبيل المثال إلبك الشيفرة التالية التي 
أستخدمها في صفحات هذا الموقع 


<META NAME="keywords"CONTENT="html,webpage design,psp,paint shop pro,arabic site"> 


<META NAME="keywords"CONTENT="html,html,html,html, webpage design,psp,paint shop 
pro,arabic site"> 


ه القيمة ١10م۲1٥ءعل‏ لتوصيف الصفحة» وذلك بعبارات قصيرة تلخص محتويات الصفحة والهدف 
منها. 


<META NAME="description" CONTENT="Html and Paint Shop Pro tutorials in Arabic,learning web 
page design in Arabic"> 


ه القيمة 0۲اه لتوثيق اسم المؤلف أو صاحب الموقع 
<META NAME="author" CONTENT="Abu Al-Abed">‏ 
ه القيمة أأعارمهء لسرد حقوق النشر الخاصة بالصفحة 


<META NAME="copyright" CONTENT="...."> 


هذه هي وسوم ۱1۸ التي تهمنا. وسوف آقوم الآن بإجمالها لك في شيفرة واحدة مع باقي الوسوم في ترويسة 

اشد خت وة قسع ا لا کی کل کد من قدا :ر عات طعا کا لے ر لفات لئے د ها فا 
بعد حسب عنوان صفحتك والكلمات المفتاحية والوصف الذي تريده (لا نتوقع مني أن أقوم أيضا بكتابه هذه القيم لك). 
كلك 3 تشن نك ضفهة ارس إن كات مخدة ار حف ارت الخاضن ما ى كات ا ارت رة 


<HEAD> 
<TITLE> ... </TITLE> 
<META HTTP-EQUIV="Content-Type" CONTENT ="text/html; charset=windows-1256"> 
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<META NAME="keywords" CONTENT=" ... ">‏ 
<META NAME="description" CONTENT="... ">‏ 
<META NAME="author" CONTENT=" ...">‏ 


<META NAME="copyright" CONTENT="... "> 
</HEAD> 


هل هذا يكفي؟ وأعني هل تكفي هذه الوسوم لتكون من الأوائل دائما على صفحات محركات البحث؟ كما أسلفت هناك 
دائماً جهود إضافية يجب عليك بذلها. وهذه المرة عليك التوجه إلى هذه المحركات والبحث عن الوصلات التشعبية 
الخاصة بإضافة المواقع الجديدة. في Asta‏ ستجد انها تىمى .4dd Page‏ ,في Infoseek‏ ڇڪ HotBot g Excite‏ 
ستجدها [R1 4d‏ أما في 00طa¥‏ فهي Si‏ ۾ Suggest‏ 70 س7710 كذلك ستجد متل هذه الوصلات في المواقع 
العربية وعادة تعرف ب أضف موقعك . 

على أية حال قم بالنقر عليها لكي تقودك إلى نموذج بسيط عليك ملؤه ببعض المعلومات عن موقعك (لا تخف فإن 
طريقة التعامل مع هذه النماذج هي أبسط مما تتصور). لكن لا تتوقع أن ترى موقعك وقد تمت إضافته في الدقائق 
التالية لهذه العمليةء فهذا يحتاج في معظم الأحوال إلى عدة أيام. 

أعرف أنك ستقول عن هذه العملية بأنها صعبة وشاقة... لذلك سوف أدلك على طريقة أسهل وأسرع بكثير. هناك برامج 
خاصة لإدراج المعلومات عن المواقع والصفحات بحيث تقوم بملء نموذج خاص لمرة واحدة فقط بكل ما تريده من 
معلومات ثم يقوم هذا البرنامج بإرسالها إلى المئات من محركات وأدلة البحث... هكذا ببساطة وبدقائق معدودة. ومن 
هذه البرامج برنامج ا۸44۷ وبرنامج Submission Wizard‏ لکن من المؤسف أن النسخ المشتركة لهذه البرامج َو 
مثيلاتهاء تكون محدودة الفعالية أي تتعامل مع عدد محدود من المحركات والأدلة وليس كلها إلا إذا قمت بشراء هذه 
البرامج. ...لكن لا بأس من تجربتها على الإطلاق. 


وأخيرا أتمنى أن تكون قد استفدت من هذا الكتاب وأنصحك بزيارة هذا الموقع فهو مفيد جداً في هذا المجال 


http://www.khayma.com/hpinarabic/ 
تحميل هذا الكتاب من موقع كتب الحاسب العربية‎ 
WWW. Cb4a. com 
للمزيد من الكتب ف ملع مجالات الحاسوب تفضلو بزيارتنا‎ 
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